#heading h2 {
    text-align: center;
    margin-bottom: 50px;
}
#gallery {
    max-width: 100vw;
    min-width: 300px;
    width: 100%;
    max-height: 1200px;
    min-height: 700px;
    margin: 0 auto;
    overflow: hidden; /* Убедитесь, что контент не выходит за пределы контейнера */
}

.gallery-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(50px, 1fr));;
    grid-template-rows: repeat(4, minmax(50px, 300px));;
    gap: 0;
    grid-template-areas:
    "g1 g1 g2 g3"
    "g1 g1 g4 g5"
    "g6 g7 g10 g10"
    "g8 g9 g10 g10";
}
.g1 { grid-area: g1; }
.g2 { grid-area: g2; }
.g3 { grid-area: g3; }
.g4 { grid-area: g4; }
.g5 { grid-area: g5; }
.g6 { grid-area: g6; }
.g7 { grid-area: g7; }
.g8 { grid-area: g8; }
.g9 { grid-area: g9; }
.g10 { grid-area: g10; }

.gallery-list .gallery-item {
    background: #f3f3f3;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
}
.gallery-list .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

.gallery-list .gallery-item:hover img {
    transform: scale(1.1);
}
.gallery-list .g-full {
    /* Добавляет две колонки к последнему элементу */
    grid-column: span 4;
}
.gallery-list .g-double {
    /* Делит область 3 колонок на 2 объекта */
    grid-column: span 2;
}
.gallery-list .g-three {
    /* Делит область 3 колонок на 2 объекта */
    grid-column: span 1;
}
@media only screen and (max-width: 1060px) {
    #heading h2 {
        font-size: 48px;
        margin-bottom: 40px;
    }
}
@media only screen and (max-width: 820px) {
    #heading h2 {
        margin-bottom: 30px;
    }
    #gallery {
        width: 100vw;
        padding: 0;
        margin: 0 auto;
        max-height: 800px;
        min-height: 200px;
        height: 380px;
    }
    .gallery-list {
        display: flex; /* Заменяем grid на flex для более простого скроллинга */
        overflow-x: auto; /* Включаем горизонтальный скролл */
        overflow-y: hidden; /* Включаем горизонтальный скролл */
        scroll-snap-type: x mandatory; /* Добавляем привязку скролла к элементам */
        height: 380px
    }

    .gallery-list .gallery-item {
        height: 380px;
        flex: 0 0 calc(100% - 2.5%); /* Задаем ширину элемента */
        scroll-snap-align: start; /* Указываем точку привязки скролла */
    }

    .gallery-list .gallery-item img {
        height: 380px;
    }
    /* Стилизация скроллбара */
    .gallery-list::-webkit-scrollbar {
        height: 1px;
        border-radius: 1px;
        top: 3px;
        margin-top: 3px;
    }

    .gallery-list::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0); /* Полностью прозрачный */
    }

    .gallery-list::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.3); /* Полупрозрачный */
    }
}
@media only screen and (max-width: 1060px) {
    #heading h2 {
        font-size: 40px;
    }
}
@media only screen and (max-width: 600px) { /* Медиа-запрос для мобильных устройств */
    #gallery {
        height: 280px;
    }
    .gallery-list {
        height: 280px
    }
    .gallery-list .gallery-item {
        height: 280px;
    }
    .gallery-list .gallery-item img {
        height: 280px;
    }
    #heading h2 {
        text-align: center;
        margin-bottom: 20px;
    }
}