:where(.component-callout) {
    container: callout / inline-size;
    text-align: center;

    :where(.component-wrapper > .region > .content-wrap) {

        /* Extra height for the background band, split evenly above and below the card.
           This sits on top of the component's vertical padding setting rather than
           replacing it, so an editor can still lengthen or shorten the band. */
        padding-block: var(--size-medium);

        :where(.content) {
            position: relative;
            background-color: rgb(from var(--color-primary-white) r g b / 80%);
            border-radius: var(--border-radius-large);
            padding-block: var(--size-medium);
            padding-inline: var(--size-large);
        }

        :where(.content h2) {
            font-weight: var(--font-weight-light);
            font-size: var(--font-size-h1);

            /* The heading is the card's first in-flow child, so the space above it is
               the card's top padding (--size-medium) PLUS its own top margin, while
               below it is just the bottom margin. Pull the top up by the padding
               difference so the visible gap is an even --size-small on both sides. */
            margin-block-start: calc(var(--size-small) - var(--size-medium));
            margin-block-end: var(--size-small);
        }
    }

    :where(.ctas) {
        display: grid;
        grid-template-columns: repeat(3, auto);
        gap: var(--size-x-small);
        justify-content: center;

        :where(.component-button) {
            margin-top: var(--size-small);
        }
    }
}

/* Once the container is narrower than the content width plus breathing room the
   region no longer insets the card, so pad it like the other components do.
   112rem = content-width-large, 4rem = minimum-inline-padding. A container query
   rather than a media query because the viewport width a media query reports
   includes the scrollbar, which left a narrow band of widths where the card ran
   edge to edge. */
@container callout (inline-size < calc(112rem + 4rem + 4rem)) {
    :where(.component-callout > .component-wrapper > .region) {
        max-width: 100%;
        padding-inline: var(--minimum-inline-padding);
    }
}

/* On narrow cards the text needs the full width, so drop the big inline padding. */
@container callout (inline-size < 80rem) {
    :where(.component-callout > .component-wrapper > .region) {
        padding-inline: var(--minimum-inline-padding);
    }

    :where(.component-callout .content) {
        padding-inline: var(--size-medium);
    }

    :where(.component-callout .ctas) {
        grid-template-columns: 1fr;
    }
}

/* The background image carries its own white fade down its top edge, and that fade is
   what blends the band into the page above it. The framework's background settings
   default to `background-size: auto` with `repeat`, which paints the image at its
   natural size, centered — on a band this short the fade is cropped away entirely and
   a large photo just shows its middle. Scale it to the band instead. The selector is
   unwrapped and three parts deep on purpose: it has to outweigh the per-component
   style tag the framework prints inline, which uses two attribute selectors and comes
   later in the document. */
.component-callout .component-wrapper[data-component-name] {
    background-size: cover;
    background-repeat: no-repeat;
}