.carousel-loop {
  --sbe-img-width: clamp(100px, calc(43px + 20vw), 433px);
  --sbe-direction: forwards;
  --sbe-duration: 30s;
  overflow: hidden;
  --sbe-space: calc(3px + 1vw);
  margin: 0 max(0.5rem, var(--sbe-space) * 0.6);
  max-width: 100%;
}
.carousel-loop ul {
  display: flex;
  gap: min(var(--sbe-space), 1rem);
  margin: min(var(--sbe-space), 1rem);
  padding: 0;
  list-style: none;
  width: max-content;
  animation: carousel-loop-scroll var(--sbe-duration) var(--sbe-direction) linear infinite;
}
.carousel-loop ul:hover {
  animation-play-state: paused;
}
.carousel-loop ul li {
  margin: 0;
}
.carousel-loop ul li img {
  width: var(--sbe-img-width);
  height: auto;
  border-radius: var(--bs-border-radius);
}

@keyframes carousel-loop-scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}
/* Optional class used by the first example */
.carousel-loop.other-settings {
  --sbe-img-width: clamp(120px, calc(22px + 17vw), 260px);
  --sbe-duration: 40s;
  --sbe-direction: reverse;
}