/* BLOK tekst */ 
.contentblok.uitgelicht_banner {
}

.contentblok.uitgelicht_banner {
    padding: 4rem 0 3rem 0;
    margin-top: 0;
    background: rgb(255,255,255);
    --percentage-wit: 50%;
    background: linear-gradient(180deg, var(--color-lichtgrijs) 0%, var(--color-lichtgrijs) var(--percentage-wit), #fff var(--percentage-wit), #fff 100%);
}
#content .contentblok.uitgelicht_banner:last-of-type {
    padding-bottom: var(--contentblok-margin-top);
}
.row_uitgelicht_banner {
    --bs-gutter-x: 0;
}
.contentblok.uitgelicht_banner .content_container {
    background-color: var(--color-blauw);
    padding: 3rem 8rem 13rem 3rem;
    color: var(--color-wit);
}
.contentblok.uitgelicht_banner h3 {
    font-size: clamp(3rem, 4.5vw, 6rem);
    margin-bottom: 4rem;
}
.contentblok.uitgelicht_banner .button + .button {
    margin-top: 1.5rem;
}
.contentblok.uitgelicht_banner p {
    margin-bottom: 3rem;
}
.contentblok.uitgelicht_banner .afbeelding_container {
    position: relative;
    margin-top: -10rem;
    transform: translateX(5rem);
}
.contentblok.uitgelicht_banner .afbeelding_inner {
    position: relative;
    right: 0;
}
.contentblok.uitgelicht_banner .bg-wit {
    color: var(--color-blauw);
    background: var(--color-wit);
    background: linear-gradient(107deg, var(--color-wit) 0%, var(--color-wit) 75%, var(--color-donkerblauw) 75%, var(--color-donkerblauw) 100%);    
}
.contentblok.uitgelicht_banner .bg-blauw {
    color: var(--color-wit);
    background: var(--color-blauw);
    background: linear-gradient(107deg, var(--color-blauw) 0%, var(--color-blauw) 75%, var(--color-donkerblauw) 75%, var(--color-donkerblauw) 100%);       
}


/* MEDIA QUERIES - MOBILE FIRST */ 

@media (min-width: 576px) {
}

@media (min-width: 768px) {
    #content .contentblok.uitgelicht_banner:last-of-type {
        padding-bottom: calc(var(--contentblok-margin-top) * 2);
    }
    
    .contentblok.uitgelicht_banner .content_container {
        padding: 3rem 8rem 5rem 3rem;
        -webkit-box-shadow: 0px 21px 34px 3px rgba(0,0,0,0.1); 
box-shadow: 0px 21px 34px 3px rgba(0,0,0,0.1);
    }
    .contentblok.uitgelicht_banner .afbeelding_container {
        margin-top: 0;
        transform: initial;
    }
    .contentblok.uitgelicht_banner .afbeelding_container {
        background: rgb(0,91,188);
        background: linear-gradient(90deg, var(--color-donkerblauw) 0%, var(--color-donkerblauw) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
    }
    .contentblok.uitgelicht_banner .afbeelding_inner {
        top: 6rem;
    }
    .contentblok.uitgelicht_banner .button + .button {
        margin-top: 2rem;
    }
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
    .contentblok.uitgelicht_banner {
        padding: 6rem 0;
    }
    .contentblok.uitgelicht_banner h3 {
        margin-bottom: 6rem;
    }
    .contentblok.uitgelicht_banner p {
        margin-bottom: 6rem;
    }
    .contentblok.uitgelicht_banner .content_container {
        padding: 6rem 16rem 6rem 6rem;
    }

}

@media (min-width: 1400px) {
    .contentblok.uitgelicht_banner {
        padding: 9rem 0;
    }
    .contentblok.uitgelicht_banner .afbeelding_inner {
        top: 9rem;
    }
}

@media (min-width: 1920px) {
    .contentblok.uitgelicht_banner .content_container {
        padding-right: 33rem;
    }
    .contentblok.uitgelicht_banner .bg-wit {
        background: var(--color-wit);
        background: linear-gradient(107deg, var(--color-wit) 0%, var(--color-wit) 80%, var(--color-donkerblauw) 80%, var(--color-donkerblauw) 100%);    
    }
    .contentblok.uitgelicht_banner .bg-blauw {
        background: var(--color-blauw);
        background: linear-gradient(107deg, var(--color-blauw) 0%, var(--color-blauw) 80%, var(--color-donkerblauw) 80%, var(--color-donkerblauw) 100%);    
    }
}

@media (min-width: 2560px) {
}