.more-like-this-component {

    container: moreLikeThis / inline-size;
    margin-block: 8rem;

    .region {
        max-width: var(--content-width-wide-2);
    }
    .more-like-this-headline {
        font-size: 3.6rem;
        font-weight: 400;
        color: var(--color-brand-navy);
    }

    .resources {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .resource.carousel-item {
        max-width: 100%;
        display: block;
        box-shadow: 0 3px 5px var(--color-gray-light);
        min-height: unset;
        position: relative;
        &:hover {
            background-color: var(--color-primary-white);
        }

        .carousel-text {
            user-select: text;
        }

        .icon-lock {
            position: absolute;
            top: 1rem;
            right: 1rem;
            width: 2rem;
            height: 2rem;
            fill: var(--color-brand-navy);
        }

    }

    .resource.carousel-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

}

/* using @media here to match existing */
@media screen and (max-width: 85em) {
    .more-like-this-component {
        padding-inline: calc(var(--mobile-padding) * 3);
    }
}


@container moreLikeThis (width < 110rem) {
    .more-like-this-component {

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

        .resource.carousel-item {
            max-width: 44.5rem;
            width: 100%;
        }
    }
}