/* Side by side: a plain flex row of equal-width items above phone width, a
   stack below it. Items are ordinary blocks (images reuse the figure
   styling); min-width: 0 lets text items shrink instead of overflowing. */
.wagtail-public-content__side-by-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 40rem) {
    .wagtail-public-content__side-by-side {
        flex-direction: row;
        align-items: flex-start;
    }

    .wagtail-public-content__side-by-side-item {
        flex: 1 1 0;
        min-width: 0;
    }
}