/* Algemeen */
:root{
    --flex-main-color: #a2a2a2;
    --flex-accent-color: #008624;
}

.flex-row{
    /* door "collapsing margins" valt 
    de margin over die van de volgende en 
    vorige rijen heen :) */
    margin-block: 100px;
}

/* Tekst & Media */
.text_media .content-wrapper{
    display: flex; gap: 50px;
}
.text_media .content-wrapper.flipped{
    flex-direction: row-reverse;
}
.text_media .content-wrapper > div{
    flex: 1;
}
.text_media .content-wrapper .image{
    background-size: cover;
}
.text_media .content-wrapper .content{
    padding-block: 150px;
    display: flex; flex-direction: column; gap: 20px;
}

/* CTA Banner */
.cta_banner .content-wrapper{
    background-color: var(--flex-main-color);
}
.cta_banner .cta-wrapper{
    padding: 50px 100px;
    display: flex; justify-content: space-between;
    align-items: center;
}
.cta_banner .cta-wrapper h3{
    margin-bottom: 0;
}
.cta_banner .cta-wrapper .image{
    display: block;
    width: 100px; height: 100px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Gecentreerde Tekst */
.gecentreerde_tekst .content-wrapper{
    max-width: 800px; margin-inline: auto;
    text-align: center;
}

/* Carousel */
.carousel .swiper {
    width: 100%;
    height: 300px;
}
.swiper-slide{
    background-color: var(--flex-main-color);
}


/* FAQ */

/* Technische functionaliteit */
.faq-item .faq-inner{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 300ms ease-in-out;
}
.faq-item .faq-inner .content{
    overflow: hidden;
}
.faq-item.is-open .faq-inner{
    grid-template-rows: 1fr;
}

/* Styling */
.faq-item{
    margin-block: 30px;
}
.faq-item h4{
    font-size: 24px; font-weight: 600;

    cursor: pointer;
    padding-bottom: 20px;
    display: flex; flex-direction: row;
    justify-content: space-between; align-items: center;

    border-bottom: 1px solid currentColor;
}
.faq-item h4 svg{
    fill: currentColor;
}
.faq-item h4 svg,
.faq-item h4 svg rect:nth-child(1){
    transition: rotate 300ms ease-in-out;
    transform-origin: center;
}
.faq-item.is-open h4 svg{
    rotate: 90deg;
}
.faq-item.is-open h4 svg rect:nth-child(1){
    rotate: 90deg;
}


/* Formulier */
.formulier .content-wrapper{
    background-color: var(--flex-main-color);
    padding: 50px;
}

.formulier .content-wrapper.type-norm{
    max-width: 800px; margin-inline: auto;
    padding: 100px;
}
.formulier .content-wrapper.type-ext{
    display: flex; gap: 50px;
}
.formulier .content-wrapper.type-ext > div{
    flex: 1;
}


/* CTA Groep */
.cta_group .content-wrapper{
    background-color: var(--flex-main-color);
    padding: 50px;
}
.cta_group .content-wrapper h2{
    text-align: center;
}
.cta_group .content-wrapper .cta-wrapper{
    margin-top: 50px;

    display: flex; flex-direction: row;
    justify-content: center; align-items: center;
    gap: 20px;
}


/* (content/post) Grid */
.flex-contentgrid{
    display: grid;
}
.flex-contentgrid > .post .image{
    background-color: var(--flex-main-color);
    aspect-ratio: 3/2;
}

@media only screen and (max-width: 992px){
    .flex-contentgrid{
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}
@media only screen and (max-width: 767px){
    .flex-contentgrid{
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
}