:where(.featured-articles-container) {
    container: featuredArticles / inline-size;

    img {
        border-radius: 2.5rem;
    }

    .featured-articles-wrapper {
        align-items: flex-end;
    }

    .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);
        }
    }


    .primary-article-link {
        height: 100%;
        min-height: 628px;
        border-radius: 2.5rem;
        aspect-ratio: 709 / 628;
    }

    .primary-article-info {
        border-radius: 2.5rem;
        max-width: fit-content;
        display: flex;
        flex-flow: column;
        align-items: flex-start;
        justify-content: flex-end;
        color: var(--color-primary-white);
        font-weight: 500;
        font-size: 2.4rem;
        padding: 4rem;
    }

    .primary-article-title {
        color: inherit;
        text-decoration: none;
        font-weight: inherit;
        font-size: inherit;

        &:hover {
            text-decoration: underline;
        }
    }

    .primary-article-read-time {
        font-size: 1.8rem;
    }

    .other-articles {
        padding-left: 6rem;
        border-left: 1px solid var(--color-medium-grey);
    }

    .single-article-item {
        margin-bottom: 4rem;
        grid-template-columns: 18rem 1fr;
        gap: 3rem;
    }

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

        &:hover {
            text-decoration: underline;
        }
    }

    .single-article-read-time {
        font-size: 1.8rem;
        color: var(--color-black90);
        margin-top: 1rem;
    }

    .single-article-item-content {
        padding-bottom: 2rem;
        border-bottom: 1px solid var(--color-medium-grey);
    }
}

@media print {
    :where(.featured-articles-container) {
        .featured-articles-wrapper {
            grid-template-columns: 1fr;
        }

        .primary-article-link {
            min-height: 0;
            height: auto;
            aspect-ratio: auto;
        }

        .primary-article-info {
            color: #000;
            text-shadow: none;
            padding: 1rem 0;
        }

        .other-articles {
            padding-left: 0;
            padding-top: 2rem;
            border-left: none;
            border-top: 1px solid #ccc;
        }

        .single-article-item {
            page-break-inside: avoid;
        }
    }
}

@container featuredArticles (width < 120rem ) {
    :where(.featured-articles-container) {

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

        .primary-article-link {
            height: auto;
            min-height: 0;
            width: 100%;
        }

        .other-articles {
            padding-left: 0;
            padding-top: 6rem;
            border-left: none;
            border-top: 1px solid var(--color-medium-grey);

        }
    }
}

@container featuredArticles (width < 75rem ) {
    :where(.featured-articles-container) {
        .featured-articles-wrapper {
            gap: 3rem;
        }
        .primary-article {
            display: flex;
            flex-flow: column;
            gap: 3rem;
            align-items: flex-start;
        }

        .primary-article-info {
            color: var(--color-brand-navy);
            text-shadow: none;
            padding: 0;
        }

        .other-articles {
            padding-top: 3rem;
        }
    }
}

@container featuredArticles (width < 50rem ) {
    :where(.featured-articles-container) {

        .single-article-item {
            grid-template-columns: 1fr;
        }
    }
}