:where(.component-basic-copy) {

    container-name: basic-copy-container;
    container-type: inline-size;

    :where(.ctas) {
        margin-top: var(--size-medium);
        display: grid;
        grid-auto-flow: column;
        gap: var(--size-x-small);
        justify-content: left;
        align-items: start;

        /* The basic-copy prose layer adds margin-block-start: 1em to every
           sibling-after-sibling; inside .ctas that pushes the second button
           down and staggers the row. Reset it so the buttons align. */
        :where(.component-button) {
            margin-block-start: 0;
        }
    }
}

:where(.component-basic-copy) {
    :where(.component-wrapper) {
        :where(.region) {
            :where(.content-wrap) {
                img {
                    height: auto;
                    max-height: 20rem;

                    /* cover, not fill: the cap can force the box shorter than the image's own
                       ratio, and fill would squash the pixels to match. Cover fills the box by
                       cropping the overflow instead, so nothing is ever distorted. */
                    object-fit: cover;
                }

                :where(.header) {
                    margin-bottom: var(--size-medium);
                }
            }
        }
    }
}

:where(.component-basic-copy) {
    :where(.component-wrapper) {
        :where(.region) {
            :where(.content-wrap:has(.side-image)) {
                display: grid;
                grid-template-columns: 1fr 2fr;
                gap: var(--size-medium);

                :where(& > :not(.side-image)) {
                    grid-column: 2;
                }

                /* A definite 20rem, not auto: with auto the box takes the image's own ratio, so
                   anything wider than 3:2 came out short of the 20rem and left the column ragged.
                   Fixed height plus cover means every side image fills the same box, cropping to
                   fit rather than stretching. Deliberately not the copy column's full height. */
                :where(.side-image) img {
                    inline-size: 100%;
                    block-size: 20rem;
                    object-fit: cover;
                }

                /* The copy column's first line (often a heading) sits below the
                   top of the side image because its line-height leaves leading
                   above the text. Trim that top leading so the first line's cap
                   height lines up with the image top. Uses the element's own cap
                   and line-height, so it self-adjusts to any first element. */
                :where(.additional-wrapper) > :first-child {
                    margin-block-start: calc((1cap - 1lh) / 2);
                }
            }
        }
    }
}

/* 144rem = content-width-large, 4rem = size-medium */
@container basic-copy-container (inline-size < calc(144rem + 4rem + 4rem)) {
    :where(.component-basic-copy > .component-wrapper > .region) {
        max-width: 100%;
        padding-inline: var(--minimum-inline-padding);
    }
}

/* Under ~1080px (108rem at this theme's 10px root) stack the side-image layout:
   image on top, copy below. */
@container basic-copy-container (inline-size < 108rem) {
    :where(.component-basic-copy > .component-wrapper > .region > .content-wrap:has(.side-image)) {
        grid-template-columns: 1fr;

        :where(.side-image) {
            max-width: 45rem;
            justify-self: center;
        }

        :where(& > :not(.side-image)) {
            grid-column: 1;
        }

        /* Top-alignment trim only matters side by side; reset it when stacked. */
        :where(.additional-wrapper) > :first-child {
            margin-block-start: 0;
        }
    }
}

@container basic-copy-container (inline-size < calc(50rem + 4rem + 4rem)) {
    :where(.component-basic-copy > .component-wrapper > .region > .content-wrap) {
        :where(.ctas) {
            grid-auto-flow: row;
            gap: var(--size-small);
        }
    }
}