/* ====== GALLERY TYPE_2 SQUARE ====== */

.gallery{
    padding-top: 107px;
}

.gallery_sqare_block {
    display: grid;
    /* Создаем сетку из 5-ти равных колонок */
    grid-template-columns: repeat(5, 1fr);
    /* Отступы между картинками */
    gap: 16px;
    /* Фиксированную высоту строк УБИРАЕМ, чтобы работал aspect-ratio */
}

/* Стили для самих ячеек галереи */
.gallery_sqare_block .gallery-item {
    /* ✨ ГЛАВНОЕ ИЗМЕНЕНЕНИЕ: Делаем элемент квадратным */
    aspect-ratio: 1 / 1;

    border-radius: 16px;
    overflow: hidden; /* Обязательно, чтобы скруглить углы у картинки */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

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

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


/* Адаптивность */
@media (max-width: 768px) {
    .gallery {
        padding-top: 60px;
    }

    .gallery_sqare_block {
        /* На средних экранах делаем 2 колонки. Квадраты сохранятся! */
        grid-template-columns: repeat(2, 1fr);
    }
}