/*Content width small does not work with component. Created news.hook.php to remove this option. Not working yet*/

:where(.component-news){
    container-name: news-container;
    container-type: inline-size;
    :where(.component-wrapper) {
        :where(.region){
            container-name: unset;
            container-type: unset;
            justify-items: center;
            display: grid;
            :where(.content-wrap){
                :where(.news-cards) {
                    display: grid;
                    /*grid-auto-flow: column;*/
                    grid-template-columns: repeat(3, auto);
                    grid-template-rows: repeat(2, auto);
                    grid-column-gap: var(--size-x-small);
                    grid-row-gap: var(--size-small);
                    justify-content: left;
                }

                :where(.pagination) {
                    padding-bottom: var(--size-medium);
                }
            }
        }
    }
}

@container news-container (max-width: 120rem) {
    :where(.component-wrapper) {
        :where(.region) {
            :where(.content-wrap) {
                :where(.news-cards) {
                    grid-template-columns: 1fr 1fr;
                    grid-template-rows: 1fr;
                    grid-column-gap: 0;
                    grid-row-gap: 1rem;
                    justify-content: left;
                    justify-items: center;
                }
            }
        }
    }
}

@container news-container (max-width: 72rem) {
    :where(.component-wrapper) {
        padding-inline: 4rem;
        :where(.region) {
            :where(.content-wrap) {
                :where(.news-cards) {
                    grid-template-columns: 1fr;
                    grid-template-rows: 1fr 1fr;
                    grid-column-gap: 0;
                    grid-row-gap: 1rem;
                    justify-content: left;
                }
            }
        }
    }
}