:where(.component-article-grid) {
    container: articleGrid / inline-size;


    .header {
        margin-block: 0 6rem;
        text-align: center;
    }
    .articles {
        row-gap: 6.5rem;
        column-gap: 2rem;
    }

    .article-category {
        font-size: 1.4rem;
        font-weight: 700;
        border-radius: 1rem;
        padding: 0.5rem 1rem;
        max-width: fit-content;
        margin-bottom: 1rem;

        &.overview {
            background: var(--color-brand-navy);
            color: var(--color-brand-pale-blue);
        }

        &.before-your-visit {
            background: var(--color-brand-peach);
            color: var(--color-brand-poppy);
        }

        &.during-your-visit {
            background: var(--color-brand-pale-blue);
            color: var(--color-brand-navy);
        }

        &.after-your-visit {
            background: var(--color-brand-teal);
            color: var(--color-primary-white);
        }
    }


    .single-article-item {
        grid-template-columns: 12rem 1fr;
        gap: 2rem;
        padding-left: 3rem;
        border-left: solid 1px var(--color-medium-grey);

        &:nth-child(n + 7) {
            display: none;
        }
    }

    .single-article-image img {
        border-radius: 2.5rem;
    }

    .article-grid-container {

        &.expanded {
            .single-article-item {

                &:nth-child(n + 7) {
                    display: grid !important;
                    animation: articleFadeIn 0.4s ease both;
                }

                &:nth-child(7) {
                    animation-delay: 0.00s;
                }

                &:nth-child(8) {
                    animation-delay: 0.08s;
                }

                &:nth-child(9) {
                    animation-delay: 0.16s;
                }

                &:nth-child(10) {
                    animation-delay: 0.24s;
                }

                &:nth-child(11) {
                    animation-delay: 0.32s;
                }

                &:nth-child(12) {
                    animation-delay: 0.40s;
                }
            }
        }
    }

    .single-article-title {
        font-size: 2.4rem;
        color: var(--color-brand-navy);
        text-decoration: none;
        line-height: calc(34/24);
        &:hover {
            text-decoration: underline;
        }
    }

    .single-article-read-time {
        margin-top: 1rem;
    }

    .view-more-button {
        display: flex;
        justify-self: center;
        color: var(--color-brand-navy);
        background: transparent;
        border: solid 1px var(--color-brand-navy);
        padding: 0.5rem 3rem;
        border-radius: 4rem;
        transition: all 250ms ease-in-out;

        &:hover {
            background: var(--color-brand-navy);
            color: var(--color-primary-white);
            cursor: pointer;
        }
    }
}

@media print {
    :where(.component-article-grid) {
        .single-article-item {
            display: grid !important;
            page-break-inside: avoid;
        }

        .view-more-button {
            display: none !important;
        }

        .articles {
            grid-template-columns: 1fr;
        }

        .single-article-item {
            padding-left: 0;
            border-left: none;
        }
    }
}

@keyframes articleFadeIn {
    from {
        opacity: 0;
        translate: 0 1rem;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}


@container articleGrid (width < 125rem) {
    :where(.component-article-grid) {
        .single-article-title {
            font-size: 2rem;
        }
    }
}

@container articleGrid (width < 110rem) {
    :where(.component-article-grid) {
        .articles {
            grid-template-columns: 1fr 1fr;
        }
    }
}

@container articleGrid (width < 75rem) {
    :where(.component-article-grid) {
        .articles {
            grid-template-columns: 1fr;
        }

        .single-article-item {
            padding-left: 0;
            border-left: none;
        }
    }
}