:where(.component-content-carousel) {
    container: contentCarousel / inline-size;
    overflow: hidden;

    .region {
        overflow: visible !important;
    }

    .header {
        max-width: 100dvw;
        width: fit-content;
    }

    .heading {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: space-between;
        align-items: center;
    }

    .optional-link {
        font-size: 2.1rem;
        text-decoration: none;
        color: var(--color-brand-navy);
        font-weight: 400;
    }

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

    .content-carousel-viewport {
        width: fit-content;
        overflow: hidden;
    }

    .content-carousel-track {
        display: grid;
        --slide-width: 42;
        --slide-gap: 3;
        --column-width: calc(var(--slide-width) * 1rem);
        grid-template-columns: repeat(8, var(--column-width) );
        gap: calc(var(--slide-gap) * 1rem);
        width: fit-content;
        transition: transform 0.35s ease;
        transform: translate(var(--offset), 0);
    }

    .carousel-slide-link {
        display: flex;
        flex-flow: column;
        gap: 2rem;
        text-decoration: none;
        color: inherit;

        &:focus-visible {
            transform: scale(0.98);
            outline: 1px solid black;
            outline-offset: 2px;
            transition: transform 0.25s ease-in;
        }

        &:hover .carousel-slide-title {
            text-decoration: underline;
        }
    }

    :where(.carousel-slide-image) {
        aspect-ratio: 4 / 3;
        border-radius: 2.5rem;
        overflow: hidden;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            border-radius: 2.5rem;
        }
    }

    :where(.carousel-slide-content) {
        display: flex;
        flex-flow: column;
        gap: 0.5rem;
    }

    :where(.carousel-slide-title) {
        font-size: 2.4rem;
        font-weight: 500;
        color: var(--color-brand-navy);
        line-height: 1.3;
    }

    :where(.carousel-slide-read-time) {
        font-size: 1.8rem;
        color: var(--color-black90);
        margin-top: 0.5rem;
    }

    .carousel-navigation {


        button {
            background: none;
            border: none;
            border-radius: 1rem;
            color: var(--color-primary-white);
            font-weight: 500;
            padding: 0;

            svg {
                width: 3.2rem;
                height: 3.2rem;
            }
            &:hover {
                cursor: pointer;
            }
        }

        .prev-button {
            svg {
                transform: rotate(180deg);
            }
        }
    }

    :where(.carousel-dots) {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 1rem;
        margin-block: 2rem;
    }

    :where(.carousel-dot) {
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        border: 2px solid transparent;
        background: var(--color-brand-navy-opacity);
        cursor: pointer;
        padding: 0;
        transition: background 0.2s;

        &.active {
            background: var(--color-brand-navy);
        }
    }
}


@media print {
    :where(.component-content-carousel) {
        overflow: visible;

        .content-carousel-viewport {
            overflow: visible;
            width: 100%;
        }

        .content-carousel-track {
            grid-template-columns: repeat(2, 1fr);
            transform: none !important;
            width: 100%;
            transition: none;
        }

        .carousel-navigation,
        :where(.carousel-dots) {
            display: none !important;
        }

        .carousel-slide-link {
            page-break-inside: avoid;
        }
    }
}

@container contentCarousel (width < 125rem) {
    :where(.component-content-carousel) {
        .content-carousel-track {
            --slide-width: 35;
            --slide-gap: 2;
        }
    }
}


@container contentCarousel (width < 90rem) {
    :where(.component-content-carousel) {
        .content-carousel-track {
            --slide-width: 28;
        }
    }
}