.component-cards {
    container-type: inline-size;
    container-name: cards;

    :where(& > .component-wrapper) {

        :where(.region) {
            :where(.content-wrap) {

                :where(.heading) {
                    text-align: center;
                }

                :where(.cards) {
                    display: grid;
                    gap: var(--size-small);
                    /* Centre the group of cards. Columns are capped at the card
                       width (below) so the cards sit next to each other with only
                       the gap between them, rather than floating apart inside wide
                       fractional columns. */
                    justify-content: center;
                    margin-bottom: var(--size-medium);
                    margin-top: var(--size-medium);

                    :where(.card-shared ) {
                        width: 100%;
                        max-width: 38rem;
                    }
                }

                :where(.cards:has(.card-shared )) {
                    grid-template-columns: minmax(0, 38rem);
                }

                :where(.cards:has(.card-shared + .card-shared)) {
                    grid-template-columns: repeat(2, minmax(0, 38rem));
                }

                :where(.cards:has(.card-shared + .card-shared + .card-shared)) {
                    grid-template-columns: repeat(3, minmax(0, 38rem));
                }
            }
        }
    }

}

/* Match the other components: once the container is narrower than the large content
   width plus its gutters, the region no longer insets itself, so add the standard
   inline padding to keep the cards off the screen edges. */
@container cards (inline-size < calc(112rem + 4rem + 4rem)) {
    :where(.component-cards > .component-wrapper > .region) {
        max-width: 100%;
        padding-inline: var(--minimum-inline-padding);
    }
}

@container cards (max-width: 100rem) {
    .component-cards {
        :where(& > .component-wrapper) {
            :where(.region) {
                :where(.content-wrap) {
                    :where(.cards) {
                        grid-template-columns: repeat(2, minmax(0, 38rem));
                    }

                    /* An odd number of cards leaves the last one alone on its row, where it
                       would sit hard left in the first track. Let it span both tracks and
                       center itself instead — max-width still holds it to a card's width. */
                    :where(.cards) > :where(.card-shared:last-child:nth-child(odd)) {
                        grid-column: 1 / -1;
                        justify-self: center;
                    }
                }
            }
        }
    }
}

@container cards (max-width: 70rem) {
    :where(.cards) {
        grid-template-columns: minmax(0, 38rem);
    }
}