/* De gallery container neemt de volledige breedte en hoogte in */
.loff-boxed-gallery {
    position: relative;
    width: 100%;
    height: 100vh; /* Volledige hoogte van het scherm */
    overflow: hidden; /* Geen scrollbalk zichtbaar */
    box-sizing: border-box;
}

/* De container voor alle slides */
.gallery-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Elke slide is absoluut gepositioneerd en bedekt de hele container */
.gallery-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Elke slide vult de volledige container */
    background-size: cover;
    background-position: center;
    z-index: 1;
    transition: transform 0.7s ease-out; /* Vloeiende overgang */
}

/* De actieve slide blijft zichtbaar */
.gallery-slide.active {
    z-index: 2; /* Actieve slide blijft bovenop */
    transform: translateY(0); /* Blijft in beeld */
}

/* De volgende slide start onder de actieve slide en schuift omhoog */
.gallery-slide.next {
    z-index: 3; /* Zorg dat de volgende slide bovenop komt */
    transform: translateY(100%); /* Start buiten beeld aan de onderkant */
}

/* Zodra de volgende slide actief wordt, schuift deze omhoog */
.gallery-slide.next.active {
    transform: translateY(0); /* Schuift omhoog in beeld */
}

/* De vorige slide blijft in beeld, zonder te verplaatsen */
.gallery-slide.previous {
    z-index: 1; /* Ligt onder de actieve */
    transform: translateY(0); /* Blijft in beeld zonder te bewegen */
}