.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);    /* 4 колонки на десктопе */
    gap: 16px;
    grid-auto-flow: dense; /* «уплотняет» раскладку, чтобы wide-элементы занимали 2 ячейки */
}
@media (max-width: 1200px) {
    .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .gallery-grid { grid-template-columns: 1fr; }
}

.tile {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: #f8f9fa;
}
/* широкие (длинные) превью занимают две колонки */
.tile--wide { grid-column: span 2; }

.tile__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;        /* чтобы плитки выглядели ровно */
    aspect-ratio: 4 / 3;      /* базовое соотношение сторон для превью */
    transition: transform .25s ease;
}
.tile__img:hover { transform: scale(1.03); }
.tile__img{
    border-radius: 15px;
}
/* Лёгкий бейдж названия (по желанию) */
.tile__caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 8px 12px;
    font-size: 0.9rem;
    color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0));
}