:root {
  --no-of-slides: 5;
  --carousel-width: 400px;
  --slide-width: 88px;
  --loop-time: 5s;
  --carousel-height: 100px;
  --slide-height: 31px;
}

.carousel {
  display: flex;
  align-items: center;
  overflow: hidden;
  width: var(--carousel-width);
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(var(--slide-width) * var(--no-of-slides)* -1));
  }
}

.link {
  animation: scroll var(--loop-time) linear infinite;
  width: var(--slide-width);
  height: fit-content;
}

/* Vertical example*/

.vertical-carousel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: var(--carousel-height);
}

@keyframes vertical-scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(var(--slide-height) * var(--no-of-slides)* -1));
  }
}

.vertical-link {
  animation: vertical-scroll var(--loop-time) linear infinite;
  height: var(--slide-height);
  width: fit-content;
}

@keyframes reversed-scroll {
  0% {
    transform: translateX(calc(var(--slide-width) * var(--no-of-slides)* -1));
  }
  100% {
    transform: translateX(0);
  }
}