.TickerTape {
  padding: 25px 0;
  background-color: var(--clr-turkis);
}

.TickerTape-inner {
  --gap: 1rem;
  display: flex;
  gap: 1rem;
  gap: var(--gap);
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-mask-image: linear-gradient(to right, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 1) 20%, hsla(0, 0%, 0%, 1) 80%, hsla(0, 0%, 0%, 0));
          mask-image: linear-gradient(to right, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 1) 20%, hsla(0, 0%, 0%, 1) 80%, hsla(0, 0%, 0%, 0));
}

.TickerTape-content {
  display: flex;
  flex-shrink: 0;
  gap: var(--gap);
  justify-content: space-around;
  min-width: 100%;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 150%; /* 28.5px */
  text-transform: uppercase;
  letter-spacing: 0.03563rem;
  animation: scroll 20s linear infinite;
  text-decoration-line: underline;
}

.TickerTape.in-Backend .TickerTape-content {
  animation: none;
}

.TickerTape.in-Backend .TickerTape-inner {
  -webkit-mask-image: none;
          mask-image: none;
}

.TickerTape-inner:hover .TickerTape-content {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .TickerTape-content {
    animation-play-state: paused;
  }
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}