.container {
    max-width: var(--main-container-max);
    margin: 0 auto;
    @include flex-direction(column);
    >img {
        width: 100%;
        height: 17.8rem;
        border-radius: .8rem;
        object-fit: cover;
        margin-bottom: 1.6rem;
        @include min(tablet){
            min-height: 39rem;
            border-radius: 1.6rem;
        }
        @include min(desktop){
            min-height: 50rem;
        }
    }
}
.carouselItem{
    @include flex-direction(column);
    height: fit-content;
}

.carouselContainer {
    max-width: 100%;
    flex-basis: 60%;
    @include flex-direction(row);
    overflow-x: auto;
    gap: .8rem;
    padding-bottom: 1.6rem;

    @include min(tablet) {
        gap: 1.6rem;
    }

    &::-webkit-scrollbar {
        height: 6px;
    }

    &::-webkit-scrollbar-track {
        background: var(--carousel-scroll-background, #b5b5b6);
        border-radius: 10rem;
    }

    &::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 10rem;
        background: var(--carousel-scroll-thumb-color, #515156);
    }

    &::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    img {
        min-width: 15.3rem;
        height: 8rem;
        border-radius: .8rem;
        object-fit: cover;
        @include min(tablet) {
            min-width: 25.7rem;
            height: 13.4rem;
            border-radius: 1.6rem;
        }

        @include min(laptop) {
            min-width: 36.5rem;
            height: 19rem;
        }
    }
}

.active{
    >img{
        opacity: .7;
    }
    
}