.introductie_blok > .container{
    position: relative;
    /* Figma: 149px above and 137px below the content inside the 768px mark.
       The jumbotron's configured padding remains outside this artwork area. */
    padding-top: calc(var(--spacing_12) * 149 / 120);
    padding-bottom: calc(var(--spacing_12) * 137 / 120);
}

.introductie_blok > .container::before{
    content: '';
    position: absolute;
    inset: 0;
    background: url('../../../images/introductie_blok_achtergrond.svg') center / contain no-repeat;
    opacity: 0.3;
    pointer-events: none;
}

.introductie_blok > .container > .row{
    position: relative;
}

.introductie_blok .introductie_blok_content > :not(h1, h2, h3, h4, header){
    /* Figma: 850px body measure within the 1320px theme container. */
    width: min(100%, calc(var(--container-width) * 85 / 132));
    margin-inline: auto;
}

.introductie_blok .introductie_blok_content h2{
    line-height: 1;
}

#content .introductie_blok .introductie_blok_content > h2 + *{
    margin-top: calc(var(--spacing_3) * 2 / 3);
}

.introductie_blok .introductie_blok_content + .introductie_blok_citaat{
    margin-top: var(--spacing_6);
}

.introductie_blok .introductie_blok_citaat{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing_3);
    hyphens: auto;
}

.introductie_blok .introductie_blok_quote{
    /* Figma: 630px quote measure within the same container. */
    width: min(100%, calc(var(--container-width) * 63 / 132));
    margin: 0;
    line-height: 1;
    color: var(--bruin);
}

.introductie_blok .introductie_blok_persoon{
    max-width: 100%;
}

.introductie_blok .introductie_blok_foto{
    /* Reuse quote_blok's 100px portrait size, limited by available space. */
    width: min(100%, 10rem);
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 20%;
    margin-bottom: 1em;
}

.introductie_blok .introductie_blok_foto picture,
.introductie_blok .introductie_blok_foto img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.introductie_blok .introductie_blok_persoon > div + div + div{
    margin-top: 0.2em;
}

@media (max-width:767px){
    .introductie_blok .introductie_blok_content > :not(h1, h2, h3, h4, header),
    .introductie_blok .introductie_blok_quote{
        width: 100%;
    }
}