.flex-layout.methode_slider-layout[data-bg="true"]{
    background-color: var(--grijs);
    margin-block: 0;
    padding-block: var(--pk-row-spacing);
}

.flex-layout.methode_slider-layout .content-col{
    height: 100%;
    display: flex;
    flex-direction: column;
}

.flex-layout.methode_slider-layout .content-col .content{
    font-size: var(--desktop-body-md);
    margin-bottom: max(1rem, calc(2 * var(--su)));
}

.flex-layout.methode_slider-layout .swiper{
    overflow: visible;
}
.flex-layout.methode_slider-layout .swiper .swiper-slide{
    font-family: 'Manuka Condensed';
    text-transform: uppercase;
    font-size: max(2.75rem, calc(7.5 * var(--su)));
    color: var(--bruin);
    background-color: var(--botergeel);
    display: flex;
    align-items: center;
    justify-content: center;

    aspect-ratio: 1;
    mask: var(--mask-url) no-repeat center / contain;
    -webkit-mask: var(--mask-url) no-repeat center / contain;
}

.flex-layout.methode_slider-layout .swiper .swiper-slide:nth-child(4n+1){
    --mask-url: url("/wp-content/uploads/2026/06/slider_mask.svg")
}
.flex-layout.methode_slider-layout .swiper .swiper-slide:nth-child(4n+2){
    --mask-url: url("/wp-content/uploads/2026/06/slider_mask_alt_1.svg");
    background-color: var(--knalpaars);
    color: var(--wit);
}
.flex-layout.methode_slider-layout .swiper .swiper-slide:nth-child(4n+3){
    --mask-url: url("/wp-content/uploads/2026/06/slider_mask_alt_2.svg");
    background-color: var(--bruin);
    color: var(--botergeel);
}

.flex-layout.methode_slider-layout .swiper .swiper-slide:nth-child(4n+4){
    --mask-url: url("/wp-content/uploads/2026/06/slider_mask_alt_3.svg");
    background-color: var(--botergeel);
    color: var(--bruin);
}

.flex-layout.methode_slider-layout .swiper .swiper-slide:nth-of-type(2){
    background-color: var(--knalpaars);
    color: var(--wit);
}

.flex-layout.methode_slider-layout .swiper .swiper-slide:not(.swiper-slide-active){
    pointer-events: none;
}

.flex-layout.methode_slider-layout .swiper .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-next){
    opacity: 0;
}
.flex-layout.methode_slider-layout .swiper-navigation{
    margin-bottom: max(1rem, calc(1 * var(--su)));
}

.flex-layout.methode_slider-layout .pk-button-group{
    margin-top: auto;
}