.faq-fases{
    background: var(--main-color)
}
.container{

}
.faq-faces__wrapper{
    display: flex; 
    gap: 64px;
}

.faq-fases__media{
    flex: 1 1 50%;
    padding-top: 64px;
}
.faq-fases__media-frame{
    border-radius: 48px;
    padding: 16px;
    overflow: hidden;
    background: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    &.ratio-auto{
        aspect-ratio: auto;
    }
    &.ratio-16-9{
        aspect-ratio: 16 / 9;
    }
    &.ratio-4-3{
        aspect-ratio: 4 / 3;
    }
    &.ratio-1-1{
        aspect-ratio: 1 / 1;
    }
    & img{
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 32px;
        object-fit: cover;
    }
}
.faq-fases__content{
    flex: 1 1 50%;
}
{# Zonder titel: haal de padding-top van de afbeelding weg, zodat de
   afbeelding omhoog schuift en met de fase-uitleg uitlijnt. #}
.faq-faces__wrapper--no-title .faq-fases__media{
    padding-top: 0;
}
.faq-faces__wrapper--no-title .ffc__fases{
    margin-top: 16px;
}
.ffc__top{

}
.ffc__fases{
margin-top: 24px;
}
.ffc__fase{
    position: relative;
    margin-bottom: 16px; 
    &::before{
        content: '';
        position: absolute;
        left: 0;
        display: block;
        width: 6px;
        border-radius: 4px;
        height: 100%;
        background: #ffd68f; 
        transition: background 0.3s;
    }
    &.is-open::before{
        background: #ffa200;
    }
}
.ffc__fase--toggler{
    padding: 8px 8px 8px 24px;
    cursor: pointer;
}

.ffc__title{
    display: block;
    font-size: 18px;
    font-weight: 700;

}
.ffc__content{
    padding: 0px 8px 8px 24px;
}

@media(max-width:1240px){
    .faq-faces__wrapper{
        gap: 32px;
    }
} 
@media(max-width:992px){
    .faq-faces__wrapper{
        flex-direction: column;
    }
    .faq-fases__media{
        padding-top: 0px;
    }
}