.component-news-archive-list {
    container-type: inline-size;
    container-name: news;

    :where(.component-wrapper) {
        :where(.region) {
            justify-items: center;
            display: grid;
            max-width: var(--content-width-medium);

            :where(.content-wrap) {
                :where(.page-title){
                    color: var(--color-brand-corporate-blue)
                }

                :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) {
                    margin-top: var(--size-small);
                    display: grid;
                    grid-template-columns: repeat(9, auto);
                    :where(.page-numbers){
                        color: var(--color-primary-white);
                        background-color: var(--color-brand-corporate-blue);
                        display: inline-flex;
                        height: 3.5rem;
                        width: 3.5rem;
                        margin: .7rem;
                        border: 2px solid var(--color-brand-corporate-blue);
                        border-radius: .5rem;
                        justify-content: center;
                        align-items: center;
                        text-decoration: none;
                        &:hover{
                            background-color: var(--color-primary-white);
                            color: var(--color-brand-corporate-blue);

                        }
                        &.current:hover{
                            background-color: var(--color-primary-white) !important;
                            color: var(--color-brand-corporate-blue) !important;
                        }
                    }
                    :where(.current){
                        background-color: var(--color-primary-white) !important;
                        color: var(--color-brand-corporate-blue) !important;
                    }
                }
            }
        }
    }
}

@container news (max-width: 120rem) {
    .component-news-archive-list{
        :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;
                    }

                    :where(.pagination) {
                        :where(.page-numbers) {
                            margin: .5rem;
                        }
                    }
                }
            }
        }
    }
}

@container news (max-width: 72rem) {
    .component-news-archive-list{
        :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;
                    }
                }
            }
        }
    }
}