.component-cards {
    :where(& > .component-wrapper) {
        :where(& > .region) {
            :where(& > .content-wrap) {
                :where(.cards) {
                    justify-items: center;

                    :where(& > .component-card) {
                        display: contents;

                        :where(& > .component-wrapper) {
                            :where(& > .region) {
                                display: contents;

                                :where(& > .content-wrap) {
                                    display: contents;
                                }
                            }
                        }
                    }

                    :where(.card) {
                        max-width: 44rem;
                        border: 2px solid var(--color-brand-grey);
                        border-radius: var(--border-radius-common);
                        display: grid;
                        grid-template-rows: 1fr 4fr 4rem;
                        overflow: hidden;

                        :where(.card-header) {
                            display: grid;
                            grid-template-columns: 1fr 5fr;
                            gap: 1rem;
                            align-items: center;
                            background-color: var(--local-title-color);
                            padding-inline: 1.5rem;
                            position: relative;

                            :where(.heading-wrapper) {
                                display: contents;
                            }

                            :where(.card-number) {
                                color: rgb(255, 255, 255, 0.4);
                                margin: 0;
                                font-size: 8rem;
                                line-height: 1rem;
                                text-align: right;
                            }

                            :where(.card-title) {
                                margin: 0;
                                color: var(--local-text-color);
                                line-height: 1.2;
                                font-weight: 600;
                            }

                            :where(.card-icon) {
                                position: absolute;
                                border: 3px solid var(--color-brand-light-grey);
                                background-color: var(--local-title-color);
                                border-radius: 50%;
                                bottom: -2.5rem;
                                right: 3rem;
                                width: 6rem;
                                height: 6rem;

                                :where(svg) {
                                    fill: var(--color-brand-light-grey);
                                }
                            }
                        }

                        :where(.card-body) {
                            background-color: var(--color-brand-light-grey);
                            margin-top: 0;
                            padding-inline: 2.5rem;
                            padding-bottom: 1.5rem;
                            padding-top: 3rem;
                            min-height: 40rem;
                            color: var(--color-brand-dark-grey);

                            :where(.card-copy) {
                                margin-top: 0;

                            }
                        }

                        :where(.card-footer) {
                            padding: 2rem;
                            background-color: var(--color-brand-corporate-blue);
                        }
                    }
                }
            }
        }
    }
}