/*
 * Fotogalerij v108
 * Computer: vier tegels, tablet: twee tegels, telefoon: één tegel.
 */
.gallery-section .photo-carousel {
    width: 100%;
    min-width: 0;
}

.gallery-section#fotogalerij {
    scroll-margin-top: 90px;
}

.gallery-section .photo-carousel__toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.gallery-section .photo-carousel__viewport {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}

.gallery-section .photo-carousel__viewport::-webkit-scrollbar {
    display: none;
}

.gallery-section div.photo-carousel__track {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: calc((100% - 42px) / 4) !important;
    align-items: stretch !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.gallery-section figure.photo-carousel__item {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 4 / 5 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #151515;
    scroll-snap-align: none !important;
}

.gallery-section figure.photo-carousel__item[data-photo-clone] {
    scroll-snap-align: none !important;
}

.gallery-section figure.photo-carousel__item > img {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

.gallery-section .photo-carousel__progress {
    margin-top: 12px;
}

@media (max-width: 959px) {
    .gallery-section div.photo-carousel__track {
        grid-auto-columns: calc((100% - 12px) / 2) !important;
        gap: 12px !important;
    }
}

@media (max-width: 599px) {
    .gallery-section div.photo-carousel__track {
        grid-auto-columns: 100% !important;
        gap: 10px !important;
    }

    .gallery-section figure.photo-carousel__item {
        aspect-ratio: 4 / 5 !important;
    }
}