.carousel-container .region {
    max-width: var(--content-width-wide-2);
    width: 100%;
}

.carousel-container {
    display: grid;
    grid-template-areas: "carousel";
    padding-bottom: 6rem;
    margin-top: 6rem;
    overflow: hidden;
}

.carousel-container .background-overlap {
    background-color: var(--color-gray-light-web);
    height: 90%;
    width: 100%;
    grid-area: carousel;
    position: relative;
    transform: translateY(14rem);
}

.carousel-container .region {
    grid-area: carousel;
    max-width: var(--content-width-wide-2);
}

.carousel-container .region .carousel-wrapper {
    display: flex;
    flex-flow: row;
    position: relative;
    gap: 2rem;
    margin-bottom: 6rem;
    z-index: 1;
    left: 0rem;
    min-width: max-content;
}

.carousel-container:has(.resource-category-filter) {
    .background-overlap {
        transform: translateY(22rem);
    }


    .resource-category-filter {
        position: relative;
        margin-bottom: 4rem;

        .dropdown {
            .term-select {
                background-color: var(--color-brand-navy);
                border: none;
                border-radius: 3rem;
                padding: 1rem 4rem;
                color: #fff;
                text-align: center;
                margin: 0;
                height: 4.5rem;
                -webkit-appearance: none; /* For Safari/Chrome */
                -moz-appearance: none; /* For Firefox */
                appearance: none;
                max-width: fit-content;
            }

            &::after {
                content: url("/wp-content/themes/aana/svgs/nav-arrow.svg");
                max-width: 1rem;
                position: relative;
                left: -3.5rem;
                pointer-events: none;
                transform: rotate(90deg);
            }
        }


    }

}

.carousel-container .clip-mask {
    clip-path: inset(-100vw -100vw -100vw 0);
    min-width: max-content;
}

.carousel-container .region h2.resource-carousel-headline {
    color: var(--color-brand-navy);
    font-size: 3.6rem;
    font-weight: 400;
    margin-bottom: 4rem;
}

.resources-container [data-role~="carousel-item"]:not([data-role~="modal"]),
.carousel-container .region [data-role~="carousel-item"]:not([data-role~="modal"]) {
    background: var(--color-primary-white);
    text-overflow: ellipsis;
    overflow: hidden;
}

.resource.carousel-item {
    display: grid;
    grid-template-rows: 20rem 20rem;
    max-width: 34.5rem;
    min-height: 40rem;
}

.resource.carousel-item .resource.carousel-text {
    display: grid;
    grid-template-rows: 4rem auto 4rem;
    padding: 2rem;
    background: var(--color-primary-white);
}

.carousel-container {
    .icon-lock {
        position: absolute;
        right: 1.5rem;
        bottom: 1.5rem;
        width: 2rem;
        height: 2rem;
        fill: var(--color-brand-navy);
    }
}


.resource.carousel-item .resource.carousel-text h3.featured {
    font-weight: 600;
    border-image: linear-gradient(to right, #db864e 37%, transparent 15%) 5;
}

.resource.carousel-item .resource.carousel-text h4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}

[data-role~="carousel"] {
    left: 0rem;
    transition: left 250ms linear;
}

.resource.carousel-container .carousel-nav a.button.blue-on-white {
    background: none;
}

.resource.carousel-container .carousel-nav a.button.blue-on-white:hover {
    background: var(--color-brand-navy);
}

.carousel-wrapper span.tag-name {
    background: none;
    margin-left: 0;
    padding-left: 0;
}

@supports selector(:has(+ *)) {
    .carousel-container a:has([data-role~="carousel-item"]) {
        -webkit-user-drag: none;
        user-drag: none;
        user-select: none;
        touch-action: manipulation;
        pointer-events: none;
    }
}

.carousel-container :where(a > [data-role~="carousel-item"]) a {
    -webkit-user-drag: none;
    user-drag: none;
    user-select: none;
    touch-action: manipulation;
    pointer-events: none;
}

.carousel-container [data-role~="carousel-item"] a:hover,
.carousel-container [data-role~="carousel-item"] a:active {
    background: none !important;
}

[data-role~=modal] {
    pointer-events: none;
}

@media screen and (max-width: 80em) {
    .resource.carousel-container .clip-mask, .resource.carousel-container .carousel-nav,
    .resource-category-filter {
        margin-left: 4rem;
    }
}

@media screen and (max-width: 70em) {
    .resource.carousel-item .resource.carousel-text h4 {
        font-size: 2rem;
    }
}

@media screen and (max-width: 45em) {
    .resource.carousel-container .carousel-wrapper > *,
    .resource.carousel-container .carousel-wrapper a > * {
        max-width: 30rem !important;
        min-width: unset;
    }

    .resource.carousel-item {
        grid-template-rows: 16.8rem 25rem !important;
        min-height: auto;
    }

    .resource.carousel-item .resource.carousel-text h3.featured {
        border-image: linear-gradient(to right, #db864e 57%, transparent 15%) 5;
    }

    .resource.carousel-item picture {
        object-fit: fill;
        object-position: center;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .resource.carousel-item picture > img {
        height: 100%;
    }

    .resource.carousel-container .resource.carousel-item picture,
    .resource.carousel-container .resource.carousel-item picture img {
        max-width: 30rem;
        aspect-ratio: 445 / 250;
    }
}

@media screen and (max-width: 35em) {
    .resource.carousel-container .clip-mask,
    .resource.carousel-container .carousel-nav {
        padding-left: 5vw;
        margin-left: 0;
    }
}