.scrolling-text {
  width: 100%;
  overflow: hidden;
  background: var(--purple-color); /* optional */
  padding: 10px;
  border-top: 5px solid var(--orange-color);
  border-bottom: 5px solid var(--orange-color);
}

.scrolling-track {
  display: flex;
  gap: 7rem; /* distance between repeated texts */
  white-space: nowrap;
  padding: 10px 0;

  animation: scroll-left 20s linear infinite;
  will-change: transform;
}

.scrolling-track span {
  font-weight: 600;
  color: white;
  flex-shrink: 0;
  font-size: larger;
}

@keyframes scroll-left {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (max-width: 500px) {
  .scrolling-text {
    padding: 5px;
    padding-left: 150px;
  }

  .scrolling-track {
    display: flex;
    gap: 100px; /* distance between repeated texts */
    animation: scroll-left-300 10s linear infinite;
  }

  .scrolling-track span {
    font-size: x-small;
  }

  @keyframes scroll-left-300 {
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(-200%, 0, 0);
    }
  }
}