.flex-layout.thema_slider-layout{
    padding-inline: 0;
    position: relative;
    overflow: visible;
}

.flex-layout.thema_slider-layout .pk-grid-container{
    padding-inline: var(--pk-site-gutter);
    padding-top: max(5rem, calc(7.5 * var(--su)));

    background-color: var(--slide-bg, var(--botergeel));
    color: var(--slide-text, var(--bruin));
    transition: background-color 300ms ease-in-out,
                color 300ms ease-in-out;

}

.flex-layout.thema_slider-layout::before,
.flex-layout.thema_slider-layout::after{
    content: '';
    width: 100%;
    display: block;
    background-color: var(--slide-bg);
    transition: background-color 300ms ease-in-out;
}

.flex-layout.thema_slider-layout::before{
    transform: translateY(1px);
    height: max(5rem, calc(8.5 * var(--su)));
    clip-path: polygon(0% 50%, 100% 0%, 100% 100%, 0% 100%);
}

.flex-layout.thema_slider-layout::after{
    transform: translateY(-1px);
    height: max(7.5rem, calc(12 * var(--su)));
    clip-path: polygon(0% 0%, 100% 0%, 100% 56%, 26.8% 100%, 0% 58%);
}

.flex-layout.thema_slider-layout .pk-button{
    background-color: var(--cta-bg);
    color: var(--cta-text);
}

.flex-layout.thema_slider-layout[data-theme="geel"]{
    --slide-bg: var(--botergeel);
    --slide-text: var(--bruin);
    --cta-bg: var(--knalpaars);
    --cta-text: var(--botergeel);
}

.flex-layout.thema_slider-layout[data-theme="paars"]{
    --slide-bg: var(--knalpaars);
    --slide-text: var(--wit);
    --cta-bg: var(--botergeel);
    --cta-text: var(--knalpaars);
}

.flex-layout.thema_slider-layout[data-theme="bruin"]{
    --slide-bg: var(--bruin);
    --slide-text: var(--botergeel);
    --cta-bg: var(--botergeel);
    --cta-text: var(--bruin);
}

.flex-layout.thema_slider-layout .swiper-slide{
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 5fr 1fr 6fr;
    grid-template-areas: "prev . next" "title . content";
}

.flex-layout.thema_slider-layout .title-col{
    grid-area: title;
}

.flex-layout.thema_slider-layout .navigation{
    grid-area: prev;
    display: flex;
    justify-content: end;
    gap: max(1.5rem, calc(1.5 * var(--su)));
    margin-bottom: max(1.5rem, calc(1.5 * var(--su)));
}

.flex-layout.thema_slider-layout .navigation .pk-button{
    flex-shrink: 0;
}

.flex-layout.thema_slider-layout .navigation .prev-button .pk-button-text{
    flex-direction: row-reverse;
}

.flex-layout.thema_slider-layout .navigation .prev-button .pk-button-text::after{
    rotate: 180deg;
}

.flex-layout.thema_slider-layout .navigation .tag{
    display: flex;
    align-items: center;
    gap: max(.5rem, calc(.5 * var(--su)));
    text-decoration: underline;
    text-transform: uppercase;
    font-weight: 700;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.flex-layout.thema_slider-layout .navigation .tag::before{
    content: '';
    width: .33em; height: .33em;
    background-color: currentColor;
    border-radius: 50%;
}

.flex-layout.thema_slider-layout .title{
    font-size: var(--very-large-heading);
    line-height: .87;
    font-family: 'Manuka Condensed';

    text-transform: uppercase;
    text-align: right;
}

.flex-layout.thema_slider-layout .text-col{
    grid-area: content;
}

.flex-layout.thema_slider-layout .text{
    margin-bottom: max(1.25rem, calc(1.25 * var(--su)));
}

@media only screen and (max-width: 767px){

    .flex-layout.thema_slider-layout .swiper-slide{
        grid-template-columns: 1fr;
        grid-template-areas: "prev" "title" "content";
    }

    .flex-layout.thema_slider-layout .title{
        text-align: left;
    }
}