.AreaCarouselControl {
    padding: 0rem .75rem !important // Adiciona espaçamento horizontal
}

.mySwiper {

    .slick-slide {
        padding: 0 .75rem; // Cria espaçamento horizontal
        box-sizing: border-box;
    }

    .swiper-horizontal>.swiper-scrollbar,
    .swiper-scrollbar.swiper-scrollbar-horizontal {
        left: var(--swiper-scrollbar-sides-offset, 0%);
        width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 0%));
        height: var(--swiper-scrollbar-size, .0625rem);
    }

    .swiper-scrollbar {
        background: #CDD2DC;

        .swiper-scrollbar-drag {
            height: .25rem;
            top: -0.0625rem;
            background: #FFCC00;
        }
    }

    .swiperClass {
        width: 20.375rem;
        height: 9rem;
        transition: all 0.3s ease-in-out;
        margin-top: 1rem;

        &:hover {
            box-shadow: 0rem 1.875rem 3.75rem 0rem #00000012;
            transform: translateY(-1rem);
        }

        .slide-card {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            border-radius: .5rem;
            background-color: #F1F3F8;
            padding: 1rem;
            width: 100%;
            height: 100%;

            &:hover {
                background-color: #FFCC00;
            }

            .slide-img {
                width: 2.625rem;
                height: 2.625rem;
                object-fit: cover;
            }

            .slide-content-text {
                h3 {
                    font-weight: 600;
                    font-size: 1.25rem;
                    line-height: normal;
                    color: #2B363C;
                    margin: 0;
                    color: #2B363C;
                }
            }
        }
    }
}

.reduced-area-mobile {
    display: none;
}

.swiper {
    margin-bottom: 2.5rem;
}

.swiper-wrapper {
    margin-bottom: 1.875rem;
}

@media (max-width: 48rem) {

    .AreaCarouselControl {
        padding: 0rem 0rem !important; // Adiciona espaçamento horizontal
    }

    .mySwiper {
        display: none;
    }

    .reduced-area-mobile {

        display: block;
        width: 100%;
        height: 100%;
        margin-bottom: 1.75rem;

        .slick-slide {
            padding: 0 .75rem; // Cria espaçamento horizontal
            box-sizing: border-box;
        }

        .slick-arrow {
            display: none;
        }

        .slide-card {
            display: flex !important;
            padding: 1rem;
            flex-direction: column;
            gap: 1rem;
            width: 18.125rem;
            height: 9rem;
            background-color: #F1F3F8;
            border-radius: 1rem;
            transition: all 0.3s ease-in-out;

            &:active {
                background-color: #FFCC00;
                box-shadow: none;
                transform: unset;
            }

            .slide-img {
                width: 2rem;
                height: 2rem;
                object-fit: cover;
            }

            .slide-content-text {
                h3 {
                    font-weight: 600;
                    font-size: 1.25rem;
                    color: #2B363C;
                    margin: 0;
                    color: #2B363C;
                    line-height: normal;
                }
            }
        }
    }

}