.flex-layout.content_gallery {
    padding-bottom: var(--pk-row-spacing);
    padding-top: var(--pk-row-spacing);
}

.flex-layout.content_gallery .pk-grid-container {
    margin-bottom: max(2rem, calc(2 * var(--su)));
    align-items: end;
}

.flex-layout.content_gallery .gallery-content {
    display: flex;
    flex-direction: column;
    gap: max(1rem, calc(1 * var(--su)));
}
.flex-layout.content_gallery .gallery-content .pk-text p:last-child {
    margin-bottom: 0;
}

.flex-layout.content_gallery .gallery-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.flex-layout.content_gallery .gallery-btn {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.flex-layout.content_gallery .gallery-btn:hover {
    opacity: 0.7;
}

.flex-layout.content_gallery .gallery-btn svg {
    display: block;
    width: 32px;
    height: 32px;
}

.flex-layout.content_gallery .content-gallery-swiper {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.flex-layout.content_gallery .swiper-slide {
    width: 52%;
    position: relative;
}

.flex-layout.content_gallery .swiper-slide img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px 0 16px 16px;
    display: block;
}

.flex-layout.content_gallery .swiper-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px 0 16px 16px;
    background: linear-gradient(0deg, rgba(10, 10, 68, 0.50), rgba(10, 10, 68, 0.50));
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.flex-layout.content_gallery .swiper-slide:not(.swiper-slide-active)::after {
    opacity: 1;
}

@media screen and (min-width: 993px) {
    .flex-layout.content_gallery .gallery-nav {
        grid-column: 11 / span 2;
    }
}

@media screen and (max-width: 992px) {
    .flex-layout.content_gallery .swiper-slide {
        width: 70%;
    }

/* De slider loopt ook hier aan beide kanten tot de schermrand (zelfde regel
   als desktop); script.js zet de eerste en laatste slide op de gutter. */

    .flex-layout.content_gallery .gallery-nav {
        justify-content: flex-start;
        margin-top:20px;
    }
    .flex-layout.content_gallery .pk-grid-container {
    margin-bottom: max(1rem, calc(2 * var(--su)));
    align-items: end;
}
}

@media screen and (max-width: 767px) {
    .flex-layout.content_gallery .swiper-slide {
        width: 88%;
    }
}

/* --------------------------------------------------------------------------
   Weinig slides (1-2): afbeeldingen gewoon naast elkaar binnen de container.
   Swiper zet .swiper-button-lock op de pijlen zodra alle slides passen; de
   pijlen verschijnen vanzelf weer als ze op een smaller scherm niet meer passen.
   -------------------------------------------------------------------------- */
.flex-layout.content_gallery .gallery-btn.swiper-button-lock {
    display: none;
}

.flex-layout.content_gallery .gallery-nav:not(:has(.gallery-btn:not(.swiper-button-lock))) {
    display: none;
}

@media screen and (min-width: 768px) {
    .flex-layout.content_gallery.has-few-slides .content-gallery-swiper {
        width: 100%;
        margin-left: 0;
    }

    .flex-layout.content_gallery.has-few-slides .swiper-slide {
        width: calc(50% - 8px);
    }

    .flex-layout.content_gallery.has-few-slides .swiper-slide::after {
        opacity: 0;
    }
}

@media screen and (min-width: 993px) {
    .flex-layout.content_gallery.has-few-slides .swiper-slide {
        width: calc(50% - 12px);
    }
}