:root {
    --carousel-fragment-width: 25%;
    --carousel-item-width: 33.33%;
}

.carousel.show-neighbors {
    overflow: hidden;
}

.carousel.show-neighbors .carousel-item-cont:first-child, 
.carousel.show-neighbors .carousel-item-cont:last-child {
    display: none;
}

.carousel.show-neighbors .carousel-item-cont {
    display: block !important;
    float: left;
    position: relative;
    width: var(--carousel-item-width);
}

.carousel.show-neighbors .carousel-indicators.indicators-bottom {
    margin: 1rem var(--carousel-fragment-width);
    bottom: unset;
    top: 100%;
}

.carousel.show-neighbors .carousel-inner {
    width: calc((100% - 2 * var(--carousel-fragment-width)) * 4);
    left: calc(2 * var(--carousel-fragment-width) - 100%);
}

.carousel.show-neighbors .carousel-control-prev, 
.carousel.show-neighbors .carousel-control-next {
    width: calc(var(--carousel-item-width) / 2);
}


.carousel.show-neighbors .carousel-item-next:not(.carousel-item-start),
.carousel.show-neighbors .carousel-item-end.active {
    -webkit-transform: translateX(var(--carousel-item-width));
    transform: translateX(var(--carousel-item-width));
}

.carousel.show-neighbors .carousel-item-prev:not(.carousel-item-end),
.carousel.show-neighbors .carousel-item-start.active {
    -webkit-transform: translateX(calc(var(--carousel-item-width) * -1));
    transform: translateX(calc(var(--carousel-item-width) * -1));
}