/* ====== GALLERY TYPE_1 LONG BLOCK ====== */

.gallery{
    padding-top: 107px;
}

.gallery_long_block {
    display: grid;
    /* Создаем сетку из 4-х равных колонок */
    grid-template-columns: repeat(5, 1fr);
    /* Отступы между картинками */
    gap: 16px;
    grid-auto-rows: 200px;
}

/* 2. Элемент `.wide` должен занимать 2 колонки */
.gallery_long_block .gallery-item.wide {
    grid-column: span 2;
}

/* 3. Стили для самих картинок (как в прошлый раз) */
.gallery_long_block .gallery-item {
    border-radius: 16px;
    overflow: hidden; /* Обязательно, чтобы скруглить углы у картинки */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.gallery_long_block .gallery-item img {
    display: block; /* Убирает лишний отступ под картинкой */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Картинка заполняет блок без искажений */
    transition: transform 0.3s ease;
}

.gallery_long_block .gallery-item:hover img {
    transform: scale(1.05);
}

/* 4. Адаптивность для мобильных */
@media (max-width: 768px) {

    .gallery{
        padding-top: 60px;
    }

    .gallery_long_block {
        /* На средних экранах делаем 2 колонки */
        grid-template-columns: repeat(2, 1fr);
    }
    /* На мобильных все элементы, включая широкие, занимают одну ячейку */
    .gallery_long_block .gallery-item.wide {
        grid-column: span 1;
    }
}