.quote_blok{
    /* Shared by portrait sizing and its available gutter space. */
    --quote_photo_size: 10rem;
}

.quote_blok > .container > .row{
    padding: 0 !important;
    display: grid;

    --padding_inline: var(--bs-gutter-x, 0.75rem);
    --content_max_width: var(--container-width, 120rem);

    --grid_columns: 10;
    --narrow_size_reduction: max(0rem, calc(((100% - var(--content_max_width)) / 2) - var(--padding_inline)));
    --_content_column_size: calc(var(--narrow_size_reduction) / 2);

    /* Supplied grid on the full container row: ten core tracks + two edge tracks.
       Bootstrap gutters are item padding here, so a grid gap would count twice. */
    grid-template-columns:
        [outer_full_width_start] minmax(0, var(--_content_column_size))
        [full_width_start] minmax(0, var(--_content_column_size))
        [content_start] minmax(var(--padding_inline), 1fr)
        repeat(var(--grid_columns), minmax(0, 1fr))
        minmax(var(--padding_inline), 1fr) [content_end]
        minmax(0, var(--_content_column_size)) [full_width_end]
        minmax(0, var(--_content_column_size)) [outer_full_width_end];
    gap: 0;
}

.quote_blok > .container > .row > .col-sm-12{
    /* Preserve ACF width/offset as spans of the container grid, not a nested grid. */
    display: grid !important;
    grid-template-columns: subgrid;
    grid-column: calc(3 + var(--quote_offset)) / span var(--quote_columns);
    width: auto;
    margin-left: 0;
    padding: 0;
}

.quote_blok .content_gekaderd_inner,
.quote_blok .quote_blok_layout{
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
}

.quote_blok .content_gekaderd_inner > header{
    grid-column: 1 / -1;
    padding-inline: calc(var(--bs-gutter-x) / 2);
}

.quote_blok .quote_blok_layout{
    align-items: start;
    hyphens: auto;
}

.quote_blok .quote_blok_persoon{
    grid-column: 1 / span 2;
    padding-left: calc(var(--bs-gutter-x) / 2);
    /* Keep spacing inside the two columns; retain the portrait when space tightens. */
    padding-right: max(calc(var(--bs-gutter-x) / 2), min(calc(var(--spacing_12) - var(--bs-gutter-x) / 2), calc(100% - var(--quote_photo_size) - var(--bs-gutter-x) / 2)));
}

.quote_blok .quote_blok_foto{
    /* Figma's 100px portrait, capped by the available profile width. */
    width: min(100%, var(--quote_photo_size));
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 20%;
    /* Keep portrait/name spacing tied to small text, not the column gutter. */
    margin-bottom: 1em;
}

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

.quote_blok .quote_blok_persoon > div + div + div{
    margin-top: 0.2em;
}

.quote_blok .quote_blok_quote{
    grid-column: 3 / -1;
    padding-inline: calc(var(--bs-gutter-x) / 2);
    /* Override Bootstrap's heading/blockquote margins and line-height. */
    margin: 0;
    line-height: 1;
    color: var(--bruin);
}

.quote_blok .quote_blok_quote:only-child{
    grid-column: 1 / -1;
}

@media (max-width:767px){
    .quote_blok > .container > .row{
        --grid_columns: 1;
    }

    .quote_blok > .container > .row > .col-sm-12{
        grid-column: content_start / content_end;
    }

    .quote_blok .quote_blok_layout{
        row-gap: var(--spacing_6);
    }

    .quote_blok .quote_blok_persoon,
    .quote_blok .quote_blok_quote{
        grid-column: 1 / -1;
        padding-inline: calc(var(--bs-gutter-x) / 2);
    }
}

@media (min-width:768px) and (max-width:991px){
    .quote_blok > .container > .row > .col-sm-12{
        grid-column: content_start / content_end;
    }

    /* Bootstrap's offset-lg-2 also ends here; keep the quote aligned with the intro. */
    .quote_blok .quote_blok_layout{
        row-gap: var(--spacing_6);
    }

    .quote_blok .quote_blok_persoon,
    .quote_blok .quote_blok_quote{
        grid-column: 1 / -1;
        padding-inline: calc(var(--bs-gutter-x) / 2);
    }
}