/* A plain grid and not `grid-lanes`: that one holds every box at its own height, these stand at one. */
.topic-teaser {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sav-grid-gutter);

    /* Only the block margin, so the content band keeps centring the block. */
    margin-block: 0;

    /* A tile keeps its drawn proportion, so it measures the row it stands in and not the window. */
    container-type: inline-size;

    @media (width >= 64rem) {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 32px where the tiles follow running text on a sectioned page, which is the one place they
   do not open the page. */
.page-layout > * + .topic-teaser {
    margin-block-start: 2rem;
}

/* 96px → 160px before the tinted band, which brings its own room inside. The second selector is
   the editor, where the distance has to sit on the wrapper a Vorlage brings along. */
.topic-teaser:has(+ .highlight),
.wp-block-block:has(> .topic-teaser):has(+ .highlight) {
    margin-block-end: clamp(6rem, 6rem + (100vw - 24.375rem) * 0.047833, 10rem);
}