.cta-teaser {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2rem;
    padding: 2rem 2rem 3rem;
    border-radius: var(--sav-radius);
    color: var(--sav-color-dunkelblau);

    /* An overview page renders without a layout container at all, where `alignwide` has
       nothing to measure against and the tinted band would reach both edges of the screen. */
    :not(.is-layout-constrained, .page-layout) > & {
        width: min(100% - 2 * var(--sav-page-margin), var(--sav-content-width));
        margin-inline: auto;
    }

    /* Side by side instead of stacked, on the twelve columns of the page grid the band
       itself spans: the picture ends with the fifth column, the text runs from the
       seventh to the eleventh and the twelfth stays free. The band therefore keeps no
       side padding of its own, or its columns would no longer be the page's. */
    @media (min-width: 64rem) {
        grid-template-columns: repeat(var(--sav-grid-columns), minmax(0, 1fr));
        column-gap: var(--sav-grid-gutter);
        align-items: center;
        padding: 3rem 0;
    }
}

/* The responsive partial writes a `picture` around the image, the editor does not — dissolved,
   the image is the grid item on both sides and one rule places it. */
.cta-teaser > picture {
    display: contents;
}

/* The design draws the picture in a shape of its own per width and crops to it, since an
   upload arrives in whatever proportion it was photographed. */
.cta-teaser__image {
    width: 100%;
    aspect-ratio: 13 / 10; /* 286 × 220 */
    object-fit: cover;

    @media (min-width: 64rem) {
        grid-column: 1 / span 5;

        /* The 48px the picture stands inside the band is its own margin, which is what
           leaves the band's columns to the page grid. */
        width: calc(100% - 3rem);
        margin-inline-start: 3rem;
        aspect-ratio: 497 / 319;
    }
}

.cta-teaser__body {
    display: flex;
    flex-direction: column;

    /* As wide as it needs to be rather than as wide as its column, so the button keeps
       its own width instead of stretching across. */
    align-items: flex-start;
    gap: 1rem;

    @media (min-width: 64rem) {
        grid-column: 7 / span 5;

        /* No picture, so no five columns to leave free beside the text. */
        .cta-teaser:not(:has(.cta-teaser__image)) & {
            grid-column: 1 / -1;
            padding-inline: 3rem;
        }
    }
}

/* Against the blue every heading of the document carries: inside the band the title
   stands in the same tone as the text below it. */
.cta-teaser__title {
    color: var(--sav-color-dunkelblau);
}

/* On top of the row gap, which together make the 32px the design leaves above the
   button — twice what it leaves between title and text. */
.cta-teaser__button {
    margin-block-start: 1rem;
}