body {
    --masonry-column-count: 4;
    --masonry-row-height: 8rem;
    --masonry-gap: 0.5rem;
}

.callout[data-callout="masonry"] {
    --callout-padding: 0;
    --callout-content-padding: 0;
    --callout-border-width: 0;
    --callout-blend-mode: normal;
    --image-shadow-offset: 0;
    --link-decoration: none;
    --link-unresolved-opacity: 1;
    --link-unresolved-filter: saturate(30%);
    
    background: none;

    > .callout-content > p {
        column-count: var(--masonry-column-count);
        column-gap: var(--masonry-gap);
    }

    > .callout-title { display: none; }

    img {
        border-radius: var(--radius-m);
    }

    a {
        font-size: 0;
    }
}
@for $i from 2 to 10 {
    .callout[data-callout="masonry"][data-callout-metadata~="col-#{$i}"] {
        --masonry-column-count: #{$i};
    }
}

.callout[data-callout="masonry"][data-callout-metadata="horizontal"] {
    > .callout-content > p {
        column-count: unset;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--masonry-gap);
    }

    > .callout-content > p > * {
        flex-grow: 1;
    }

    img {
        height: var(--masonry-row-height);
        width: 100%;
        object-fit: cover;
    }

    > .callout-content > p > *:last-child {
        flex-grow: unset;
    }

    br {
        display: none;
    }
}