@media (max-width: 767px) {
      .myCarousel .carousel-inner .carousel-item > div {
            display: none;
        }
        .myCarousel .carousel-inner .carousel-item > div:first-child {
            display: block;
        }
        .myCarousel .carousel-inner .carousel-item.active,
        .myCarousel .carousel-inner .carousel-item-next,
        .myCarousel .carousel-inner .carousel-item-prev {
            display: block !important;
        }
    
    }
    
    .myCarousel .carousel-inner .carousel-item.active,
    .myCarousel .carousel-inner .carousel-item-next,
    .myCarousel .carousel-inner .carousel-item-prev {
        display: flex;
    }
    
    /* medium and up screens */
    @media (min-width: 768px) {
    
        .myCarousel .carousel-inner .carousel-item-end.active,
        .myCarousel .carousel-inner .carousel-item-next {
            transform: translateX(25%) !important;
        }
    
        .myCarousel .carousel-inner .carousel-item-start.active, 
        .myCarousel .carousel-inner .carousel-item-prev {
            transform: translateX(-25%) !important;
        }
    }
    
    .myCarousel .carousel-inner .carousel-item-end,
    .myCarousel .carousel-inner .carousel-item-start { 
        transform: translateX(0) !important;
    }
    .myCarousel .carousel-control-next, .carousel-control-prev {
        width: unset !important;
    }
  


    @media (max-width: 767px) {
      .myCarousel .carousel-inner .carousel-item > div {
            display: none;
        }
        .myCarousel .carousel-inner .carousel-item > div:first-child {
            display: block;
        }
    }
    
    .myCarousel .carousel-inner .carousel-item.active,
    .myCarousel .carousel-inner .carousel-item-next,
    .myCarousel .carousel-inner .carousel-item-prev {
        display: flex;
    }
    
    /* medium and up screens */
    @media (min-width: 768px) {
    
        .myCarousel .carousel-inner .carousel-item-end.active,
        .myCarousel .carousel-inner .carousel-item-next {
            transform: translateX(25%) !important;
        }
    
        .myCarousel .carousel-inner .carousel-item-start.active, 
        .myCarousel .carousel-inner .carousel-item-prev {
            transform: translateX(-25%) !important;
        }
    }
    
    .myCarousel .carousel-inner .carousel-item-end,
    .myCarousel .carousel-inner .carousel-item-start { 
        transform: translateX(0) !important;
    }
    .myCarousel .carousel-control-next, .carousel-control-prev {
        width: unset !important;
    }