.service--banner-placeholder {
  position: relative;
  height: 100px;

  margin-bottom: 20px;

  display: flex;
  justify-content: center;

  transform: translateY(200px);
  opacity: 0;
  animation: showUpFounders both;
  animation-timeline: view(50% 20%);
}

@keyframes showUpFounders {
  from {
    transform: translateY(200px);
    opacity: 0;
  }
  to {
    transform: translateY(0px);
    opacity: 1;
  }
}

.service--banner-container {
  width: 100vw;
  height: 100px;

  display: flex;
  flex-direction: row;
  align-items: center;

  position: absolute;
}
.service--banner-container:hover .banner-item {
  animation-play-state: paused;
}

:root {
  --banner-time: 20s;
  --elements: 10;
}

.banner-item {
  position: absolute;
  left: -200px;
  transition: transform 0.3s ease-in;
  animation: moveBannerElement var(--banner-time) linear infinite;
  animation-delay: calc(
    -1 * var(--banner-time) + (var(--banner-time) / var(--elements)) * (var(
            --position
          ) - 1)
  );
}
.banner-item::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  backdrop-filter: grayscale(100%);
  z-index: 10;
  transition: backdrop-filter 0.3s ease-in;
}
.banner-item:hover {
  transform: scale(1.1);
}
.banner-item:hover::before {
  backdrop-filter: grayscale(0%);
}

.banner-item img {
  width: calc((100vw / var(--elements)) - 10px);
  height: auto;
}

@keyframes moveBannerElement {
  from {
    left: -200px;
  }
  to {
    left: 100%;
  }
}