@ci: carousel-item;
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: tomato !important;
}

.fdi-Carousel .carousel-inner .active.carousel-item,
.fdi-Carousel .carousel-inner .carousel-item-next,
.fdi-Carousel .carousel-inner .carousel-item-prev {
    display: flex;
}

/*  Large devices (desktops, 992px and up)
-------------------------------------------------- */

@media (min-width: 992px) {
    /* 'Again 33% means col-4, in order to make it responsive or whatever you want, you have to create different translateX()  for differernt col' */
    .fdi-Carousel .carousel-inner .active.carousel-item-left,
    .fdi-Carousel .carousel-inner .carousel-item-prev {
        transform: translateX(-33.33%);
    }
    .fdi-Carousel .carousel-inner .active.carousel-item-right,
    .fdi-Carousel .carousel-inner .carousel-item-next {
        transform: translateX(33.33%);
    }
    .fdi-Carousel .carousel-inner .carousel-item-left,
    .fdi-Carousel .carousel-inner .carousel-item-right {
        transform: translateX(0);
    }
}

/*  Medium devices (tablets, 768px and up)
-------------------------------------------------- */

@media (min-width: 768px) and (max-width: 991.98px) {
    /* 'Again 33% means col-4, in order to make it responsive or whatever you want, you have to create different translateX()  for differernt col' */
    .fdi-Carousel .carousel-inner .active.carousel-item-left,
    .fdi-Carousel .carousel-inner .carousel-item-prev {
        transform: translateX(-50.00%);
    }
    .fdi-Carousel .carousel-inner .active.carousel-item-right,
    .fdi-Carousel .carousel-inner .carousel-item-next {
        transform: translateX(50.00%);
    }
    .fdi-Carousel .carousel-inner .carousel-item-left,
    .fdi-Carousel .carousel-inner .carousel-item-right {
        transform: translateX(0);
    }
}

/* display width less than 768
-------------------------------------------------- */

@media (max-width:767.98px) {
    /* 'Again 33% means col-4, in order to make it responsive or whatever you want, you have to create different translateX()  for differernt col' */
    .fdi-Carousel .carousel-inner .active.carousel-item-left,
    .fdi-Carousel .carousel-inner .carousel-item-prev {
        transform: translateX(-100.00%);
    }
    .fdi-Carousel .carousel-inner .active.carousel-item-right,
    .fdi-Carousel .carousel-inner .carousel-item-next {
        transform: translateX(100.00%);
    }
    .fdi-Carousel .carousel-inner .carousel-item-left,
    .fdi-Carousel .carousel-inner .carousel-item-right {
        transform: translateX(0);
    }
}