:where(.component-centered-callout) {
    text-align: center;

    :where(.component-wrapper > .region > .content-wrap) {
        :where(.content) {
            background-color: rgb(from var(--color-primary-white) r g b / 80%);
            border-radius: 2rem;
            padding-block: var(--size-medium);
            padding-inline: var(--size-large);

            /* However long the copy runs, it stays clear of the box's edges. */
            & > :where(:not(.ctas)) {
                max-inline-size: var(--content-width-medium);
                margin-inline: auto;
            }
        }

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

    :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);
        }
    }
}

@media screen and (width <= 50rem) {

    .component-centered-callout {
        padding-inline: 4rem;

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

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