@keyframes scroll-number-to-top {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(var(--translate-top));
  }
}

@keyframes scroll-number-to-bottom {
  0% {
    transform: translateY(var(--translate-bottom-start));
  }
  100% {
    transform: translateY(var(--translate-bottom-end));
  }
}

.scroll-number-to-top {
  --translate-top: -363px;

  animation: scroll-number-to-top 3s ease-in-out infinite;

  @media (min-width: 768px) {
    --translate-top: -644px;
  }
}

.scroll-number-to-bottom {
  --translate-bottom-start: -363px;
  --translate-bottom-end: -333px;

  animation: scroll-number-to-bottom 1s ease-in-out infinite;

  @media (min-width: 768px) {
    --translate-bottom-start: -644px;
    --translate-bottom-end: -594px;
  }
}