:root {
    --swiper-navigation-sides-offset: -4rem;
    --swiper-navigation-size: 20px;
    /* offset for navigation */
}

.swiper-container {
    position: relative;
}

.swiper {
    position: static;
    /* decoration */
}

.swiper-button-prev {
    top: 110px;
}

.swiper-button-next {
    top: 110px;
}

.btn-swiper {
    padding: 20px;
    border: 1px solid black;
    border-radius: 50%;
    color: black;
}

.swiper {
    width: 100%;
    height: 100%;
}

.show-slide.swiper-slide-active {
    width: 400px !important;
    transition: all 0.2s ease;
}

.swiper-slide>.card {
    overflow: hidden;
}

@media only screen and (max-width: 620px) {
    .show-slide.swiper-slide-active {
        width: 300px !important;
    }

    .btn-swiper.prev-slide {
        left: -10px;
        color: bisque;
        border: 1px solid bisque;
    }

    .btn-swiper.next-slide {
        right: 0;
        color: bisque;
        border: 1px solid bisque;
    }
}


@media only screen and (max-width: 350px) {
    .show-slide.swiper-slide-active {
        width: 250px !important;
    }
}

@media only screen and (max-width: 250px) {
    .show-slide.swiper-slide-active {
        width: 150px !important;
    }
}