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

:where(.component-basic-copy) {
    :where(.component-wrapper) {
        :where(.region) {
            :where(.content-wrap) {
                :where(.header) {
                    margin-bottom: var(--size-medium);
                }
            }
        }
    }
}

/* 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);
    }
}

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