Карусель не показывает больше карт, чем 1 в ряду

Question

Я пытаюсь понять, почему карусель Bootstrap 4 на моей странице показывает только одну карту вместо четырех карт подряд.

Я хотел бы видеть 4 карты каждый раз, но, кажется, не работает на моей странице и не могу понять, в чем проблема.

здесь вы можете увидеть мою страницуи, как вы увидите, в строке видна только одна карта. Я хотел бы понять, что вызывает такое поведение.

Мой CSS:

/* Carousel Songs */
@media (min-width: 768px) {
  /* show 4 items */
  .carousel-inner .active,
  .carousel-inner .active .carousel-item,
  .carousel-inner .active .carousel-item .carousel-item,
  .carousel-inner .active .carousel-item .carousel-item .carousel-item {
    display: block;
  }

  .carousel-inner
    .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
  .carousel-inner
    .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)
    .carousel-item,
  .carousel-inner
    .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)
    .carousel-item
    .carousel-item,
  .carousel-inner
    .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)
    .carousel-item
    .carousel-item
    .carousel-item {
    transition: none;
  }

  .carousel-inner .carousel-item-next,
  .carousel-inner .carousel-item-prev {
    position: relative;
    transform: translate3d(0, 0, 0);
  }

  .carousel-inner
    .active.carousel-item
    .carousel-item
    .carousel-item
    .carousel-item
    .carousel-item {
    position: absolute;
    top: 0;
    right: -25%;
    z-index: -1;
    display: block;
    visibility: visible;
  }

  /* left or forward direction */
  .active.carousel-item-left .carousel-item-next.carousel-item-left,
  .carousel-item-next.carousel-item-left .carousel-item,
  .carousel-item-next.carousel-item-left .carousel-item .carousel-item,
  .carousel-item-next.carousel-item-left
    .carousel-item
    .carousel-item
    .carousel-item,
  .carousel-item-next.carousel-item-left
    .carousel-item
    .carousel-item
    .carousel-item
    .carousel-item {
    position: relative;
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  /* farthest right hidden item must be absolue position for animations */
  .carousel-inner .carousel-item-prev.carousel-item-right {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    visibility: visible;
  }

  /* right or prev direction */
  .active.carousel-item-right .carousel-item-prev.carousel-item-right,
  .carousel-item-prev.carousel-item-right .carousel-item,
  .carousel-item-prev.carousel-item-right .carousel-item .carousel-item,
  .carousel-item-prev.carousel-item-right
    .carousel-item
    .carousel-item
    .carousel-item,
  .carousel-item-prev.carousel-item-right
    .carousel-item
    .carousel-item
    .carousel-item
    .carousel-item {
    position: relative;
    transform: translate3d(100%, 0, 0);
    visibility: visible;
    display: block;
    visibility: visible;
  }
}