@media only screen and (max-width: 767px) {
    .carousel-container {
        position: relative;
        height: 250px;
    }
    .carousel-row {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        user-select: none;
        overflow: hidden;
        transition: opacity 0.5s ease-in-out, visibility 0s linear 0.5s;
    }

    .carousel-row .carousel-wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;
        transition: all 300ms ease-in-out;
        z-index: -1;
        opacity: 1;
    }

    .carousel-wrapper.active {
        opacity: 1;
        z-index: 99;
    }

    .carousel-wrapper.prev {
        z-index: 2;
        opacity: 1;
        transform: translate(-155%, -50%);
    }

    .carousel-wrapper.next {
        z-index: 2;
        opacity: 1;
        transform: translate(55%, -50%);
    }
}