.views-bootstrap-multi-item {
  --views-bootstrap-multi-item-card-margin: 1rem;
  --views-bootstrap-multi-item-card-border-width: 1px;
  --views-bootstrap-multi-item-card-excess: calc((var(--views-bootstrap-multi-item-card-margin) + var(--views-bootstrap-multi-item-card-border-width)) * 2);
}

.views-bootstrap-multi-item:not(.slide) .carousel-item {
  transition-duration: 0s;
}

@keyframes slideLeftToOrigin {
  from {
    transform: translateX(calc(-100% - var(--views-bootstrap-multi-item-card-excess)));
  }
  to {
    transform: translateX(0);
  }
}

@media (min-width: 576px) {
  .views-bootstrap-multi-item {
    --views-bootstrap-multi-item-cards-visible: 2;
    --views-bootstrap-multi-item-transition-duration: 0.6s;
  }

  .views-bootstrap-multi-item .carousel-item {
    margin-right: 0;
    float: none;
    transform: translateX(0);
    transition-duration: 0s;
  }

  .views-bootstrap-multi-item .carousel-item.active,
  .views-bootstrap-multi-item .carousel-item-prev {
    display: flex !important;
  }

  .views-bootstrap-multi-item .carousel-item-next,
  .views-bootstrap-multi-item .carousel-item.active.carousel-item-end {
    display: none !important;
  }

  .views-bootstrap-multi-item.slide .carousel-item.active {
    transition-duration: var(--views-bootstrap-multi-item-transition-duration);
  }

  .views-bootstrap-multi-item.slide .carousel-item-start.active {
    transform: translateX(calc(-100% / var(--views-bootstrap-multi-item-cards-visible))) !important;
  }

  .views-bootstrap-multi-item.slide .carousel-item-prev > * {
    animation: slideLeftToOrigin var(--views-bootstrap-multi-item-transition-duration) forwards ease-in-out;
  }

  .views-bootstrap-multi-item .carousel-item .card,
  .views-bootstrap-multi-item .carousel-item .item {
    width: calc(100% / var(--views-bootstrap-multi-item-cards-visible) - var(--views-bootstrap-multi-item-card-excess));
    flex: 0 0 calc(100% / var(--views-bootstrap-multi-item-cards-visible) - var(--views-bootstrap-multi-item-card-excess));
  }
}

@media (min-width: 992px) {
  .views-bootstrap-multi-item {
    --views-bootstrap-multi-item-cards-visible: 3;
  }
}

@media (min-width: 1400px) {
  .views-bootstrap-multi-item {
    --views-bootstrap-multi-item-cards-visible: 4;
  }
}

.views-bootstrap-multi-item .card,
.views-bootstrap-multi-item .item {
  margin: var(--views-bootstrap-multi-item-card-margin);
  border: black var(--views-bootstrap-multi-item-card-border-width) solid;
  height: calc(100% - var(--views-bootstrap-multi-item-card-excess));
}

.views-bootstrap-multi-item .item {
  position: relative;
}