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

    :where(& > .component-wrapper) {
        background-image: var(--background-image-blue-gradient);
        background-size: cover;
        background-repeat: no-repeat;

        :where(.region) {
            :where(.content-wrap) {
                :where(.cards) {
                    display: grid;
                    grid-template-columns: 1fr 1fr 1fr;
                    gap: 2rem;
                    margin-bottom: var(--size-medium);
                    margin-top: var(--size-medium);
                }
            }
        }
    }

    &.content-max-width-large {
        :where(& > .component-wrapper) {
            :where(.region) {
                :where(.content-wrap) {
                    padding-inline: var(--size-small);
                }
            }
        }
    }
}

@container cards (max-width: 100rem) {
    .component-cards {
        :where(& > .component-wrapper) {
            :where(.region) {
                :where(.content-wrap) {
                    padding-inline: var(--size-small);

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

@container cards (max-width: 70rem) {
    :where(.cards) {
        grid-template-columns: 1fr;
    }
}