@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");
html {
  scroll-behavior: smooth;
}

.slider {
  width: 100%;
  height: var(--height);
}

.slider-list {
  display: flex;
  width: 100%;
  min-width: calc(var(--width) * var(--quantity));
  position: relative;
}

.slider-item {
  width: var(--width);
  height: var(--height);
  position: absolute;
  left: max(calc(var(--width) * var(--position)), 100%);
  animation: autoRun 20s linear infinite;
  transition: filter 0.5s;
  animation-delay: calc(
    (20s / var(--quantity)) * (var(--position) - 1) - 10s
  ) !important;
}

.team-item {
  width: var(--width);
  height: var(--height);
  /* position: absolute;
  left: max(calc(var(--width) * var(--position)), 100%);
  animation: autoRun 100s linear infinite;
  transition: filter 0.5s;
  animation-delay: calc(
    (100s / var(--quantity)) * (var(--position) - 1) - 90s
  ) !important; */
}

.slider-item img {
  width: 100%;
  height: var(--height);
}

@keyframes autoRun {
  to {
    left: calc(var(--width) * -1);
  }
}

/* .slider-wrapper {
  width: 100%;
  position: relative;
  height: var(--team-height);
  margin-top: 5rem;
  overflow: hidden;
}

@keyframes scrollLeft {
  to {
    left: calc(var(--team-width) * -3);
  }
}

.slider-wrapper img {
  width: 100%;
  height: var(--team-height);
  position: absolute;
  left: max(calc(var(--team-width) * var(--team-quantity)), 100%);
  animation-name: scrollLeft;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  transition: filter 0.5s;
  animation-delay: calc(
    30s / var(--team-quantity) * (var(--team-quantity) - var(--slider-pos)) * -1
  );
} */