.fotogalerij .fotogalerij_items{
    --fotogalerij_tussenruimte: var(--bs-gutter-x);
    /* Override horizontal gutters only; retain row and caption spacing. */
    margin-inline: calc(var(--fotogalerij_tussenruimte) / -2);
    row-gap: var(--bs-gutter-x);
}

.fotogalerij .fotogalerij_items.tussenruimte_6{
    --fotogalerij_tussenruimte: var(--spacing_6);
}

.fotogalerij .fotogalerij_items.tussenruimte_8{
    --fotogalerij_tussenruimte: var(--spacing_8);
}

.fotogalerij .fotogalerij_items.tussenruimte_10{
    --fotogalerij_tussenruimte: var(--spacing_10);
}

.fotogalerij .fotogalerij_items > div{
    padding-inline: calc(var(--fotogalerij_tussenruimte) / 2);
}

.fotogalerij .fotogalerij_item{
    margin: 0;
}

.fotogalerij .fotogalerij_afbeelding{
    display: block;
    aspect-ratio: 410 / 330;
    overflow: hidden;
}

.fotogalerij .fotogalerij_2_koloms{
    aspect-ratio: 770 / 520;
}

.fotogalerij .fotogalerij_afbeelding picture{
    display: flex;
    width: 100%;
    height: 100%;
}

.fotogalerij .fotogalerij_afbeelding img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fotogalerij .fotogalerij_tekst{
    display: flex;
    flex-direction: column;
    /* Figma: 15px above the text and 5px between title/caption at a 30px gutter. */
    margin-top: calc(var(--bs-gutter-x) / 2);
    gap: calc(var(--bs-gutter-x) / 6);
    hyphens: auto;
}

.fotogalerij .fotogalerij_caption{
    color: color-mix(in srgb, var(--zwart) 75%, var(--wit));
}

@media (max-width:767px){
    .fotogalerij_uitbreken > .container{
        --grid_columns: 1;
    }
}
.fotogalerij_uitbreken > .container{
    padding: 0 !important;
    display: grid;
    width: 100%;
    max-width: none;

    --grid_columns: 10;
    /* Each outer track is half the distance from the screen to the container.
       Retain one normal gutter at narrow widths. */
    --narrow_size_reduction: max(calc(var(--bs-gutter-x) * 2), calc((100% - var(--container-width)) / 2));
    --_content_column_size: calc(var(--narrow_size_reduction) / 2);

    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(0, 1fr)
        repeat(var(--grid_columns), minmax(0, 1fr))
        minmax(0, 1fr) [content_end]
        minmax(0, var(--_content_column_size)) [full_width_end]
        minmax(0, var(--_content_column_size)) [outer_full_width_end];
    /* Bootstrap already supplies gutters inside the selected grid span. */
    gap: 0;
}

.fotogalerij_uitbreken > .container > .row{
    grid-column: full_width_start / full_width_end;
    min-width: 0;
}