:root :where(.component-columns) {
    :where( & > .component-wrapper > .region > .content-wrap) {
        display: grid;
        justify-items: var(--local-justify-items);
        align-items: var(--local-align-items);
        justify-content: var(--local-justify-content);
        align-content: var(--local-align-content);
        /* Gap is intentionally used because when we go responsive, the same gap for columns will be used for rows */
        gap: var(--local-column-gap);

        :where(& > .header) {
            grid-column: 1 / -1;
            margin: 0;
        }

        :where(& > .column) {
            justify-self: var(--local-justify-self);
            align-self: var(--local-align-self);
            width: 100%;
        }
    }

    :where(&.columns-count-2 > .component-wrapper > .region > .content-wrap) {
        grid-template-columns: var(--local-column-size);
    }

    :where(&.columns-count-3 > .component-wrapper > .region > .content-wrap) {
        grid-template-columns: 1fr 1fr 1fr;
    }

    :where(&.columns-count-4 > .component-wrapper > .region > .content-wrap) {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    :where(&.columns-width-full > .component-wrapper > .region > .content-wrap) {
        max-width: 100%;
    }
}

@media screen and (width <= 90em) {
    :root :where(.component-columns > .component-wrapper > .region > .content-wrap) {
        :where(& > .header) {
            padding-inline: var(--minimum-inline-padding);
        }

        :where(.region){
            padding-top: 1rem;
        }

        :where(.header) {
            margin-top: 1rem
        }

    }
}


@media screen and (width <= 55em) {
    :root :where(.component-columns > .component-wrapper > .region > .content-wrap) {
        grid-template-columns: 1fr;
        gap: 0;
        :where(& > .header){
            margin-bottom: 3rem;
        }
        :where(.region){
            padding-block: 2rem;

            :where(.header){
                margin-top: 0;
            }
        }
    }
    :root :where(.component-columns > .component-wrapper > .region ) {
        padding-block: 0;
        padding: 0
    }
}