.widget-masonry__container {
    display: grid;
    grid-template-columns: repeat(var(--masonry-cols, 1), 1fr);
    grid-auto-rows: 4px;
    column-gap: var(--masonry-gutter, 16px);
    width: 100%;
}

.widget-masonry__item {
    /* De begin-span wordt server-side per item inline gezet (style="grid-row-end: span N")
       op basis van de echte beeldverhouding, zodat de eerste paint vrijwel klopt; masonry.js.tpl
       verfijnt daarna naar de exacte hoogte. align-self: start houdt de afbeelding bovenaan zijn
       cel. De span 50 hieronder is enkel een ultieme fallback als de inline-hint ontbreekt. */
    align-self: start;
    grid-row-end: span 50;
}

.widget-masonry__inner {
    display: block;
    position: relative;
}

.widget-masonry__link {
    display: block;
    text-decoration: none;
}

.widget-masonry__image {
    display: block;
    width: 100%;
    height: auto;
}

.widget-masonry__caption {
    display: block;
    padding-top: var(--st-spacing-2xs);
    font-size: var(--text-size-xs);
    line-height: var(--text-line-height);
}

.widget-masonry__caption--italic {
    font-style: italic;
}

/* Met achtergrond sluit het bijschrift aan op de afbeelding en krijgt het wat ruimte. */
.widget-masonry__caption--light,
.widget-masonry__caption--dark {
    padding-inline: var(--st-spacing-2xs);
    padding-block: var(--st-spacing-2xs);
}

.widget-masonry__caption--light {
    background-color: var(--grey-100);
    color: var(--grey-900);
}

.widget-masonry__caption--dark {
    background-color: var(--grey-900);
    color: var(--grey-50);
}

/* Bijschrift als overlay onderaan de afbeelding: lichte tekst op een donkere,
   semitransparante achtergrond, met dezelfde padding als de licht/donker-variant. */
.widget-masonry__caption--overlay {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding-inline: var(--st-spacing-2xs);
    padding-block: var(--st-spacing-2xs);
    background-color: color-mix(in srgb, var(--grey-900) 60%, transparent);
    color: var(--grey-50);
    /* Klik gaat door naar de afbeelding (bv. lightbox) i.p.v. op het bijschrift te blijven. */
    pointer-events: none;
}

/* Border-radius i.c.m. een bijschrift met achtergrond: de afbeelding krijgt alleen de boven-
   hoeken afgerond en het bijschrift de onderhoeken, zodat het samen één afgeronde kaart vormt. */
.widget-masonry__image--radius-top {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.widget-masonry__caption--radius-bottom {
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

/* Teksten boven Masonry grid */
.widget-masonry__paragraph {
    margin-block-end: var(--st-spacing-md);
}
.widget-masonry-256da24d-e736-4bb0-917f-f34529547d18 {
    --masonry-gutter: 0.5rem;
    --masonry-cols: 3;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .widget-masonry-256da24d-e736-4bb0-917f-f34529547d18 {
        --masonry-gutter: 1rem;
        --masonry-cols: 2;
    }
}

@media screen and (min-width: 992px) {
    .widget-masonry-256da24d-e736-4bb0-917f-f34529547d18 {
        --masonry-gutter: 20px;
        --masonry-cols: 3;
    }
}