.component-blogs-archive-list {
    container-type: inline-size;
    container-name: blogs;
    --local-blog-image-width: 40rem;
    --local-blog-image-height: 25rem;

    :where(.component-wrapper) {
        :where(.region) {
            container-name: unset;
            container-type: unset;
            display: grid;
            max-width: var(--content-width-large);

            :where(.content-wrap) {
                :where(.blog-container) {
                    display: grid;
                    grid-template-columns: 1fr;
                    margin-block: 2rem;
                    gap: 2rem;
                    :where(.blog-card) {
                        display: grid;
                        grid-template-columns: 1fr var(--local-blog-image-width);
                        gap: 2rem;
                        min-height: var(--local-blog-image-height);
                        :where(.blog-copy){
                            display: grid;
                            grid-template-columns: 1fr;

                            :where(.post-date){
                                font-size: 1.6rem;
                            }

                            :where(.blog-title-link){
                                text-decoration: none;
                                color: var(--color-brand-corporate-blue);
                                :where(.blog-title){
                                    margin-block: 1rem;
                                }
                            }

                            :where(.component-button){
                                margin-block: 1.5rem;
                            }
                        }
                        :where(.blog-image){
                            height: var(--local-blog-image-height);
                            & img{
                                width: var(--local-blog-image-width);
                                height: var(--local-blog-image-height);
                                object-fit: cover;
                                border-radius: var(--border-radius-common);
                            }
                        }
                    }
                    :where(.blog-divider){
                        border-top: 1px solid var(--color-brand-corporate-blue);
                    }

                }

                :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 blogs (max-width: 135rem) {
    .component-blogs-archive-list {
        :where(.component-wrapper) {
            :where(.region) {
                :where(.content-wrap) {
                    margin-inline: 4rem;
                }
            }
        }
    }
}

@container blogs (max-width: 70rem) {
    .component-blogs-archive-list {
        :where(.component-wrapper) {
            :where(.region) {
                :where(.content-wrap) {
                    :where(.blog-container) {

                        :where(.blog-card) {
                            grid-template-columns: 1fr;
                            height: auto;

                            :where(.blog-image){
                                display: grid;
                                justify-items: center;
                            }
                        }
                    }
                }
            }
        }
    }
}