.scrolling-news {
  --animation-delay: 20s;
  overflow: hidden;
  background: var(--purple);
  border-top: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
}


.scrolling-news-wrapper {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 16px 0;
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -moz-animation: scroll-left var(--animation-delay) linear infinite;
  -webkit-animation: scroll-left var(--animation-delay) linear infinite;
  animation: scroll-left var(--animation-delay) linear infinite;
}

.scrolling-news__item {
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
  font-family: var(--heading-font);
  white-space: nowrap;
}

/* for Firefox */
@-moz-keyframes scroll-left {
  from { -moz-transform: translateX(100%); }
  to { -moz-transform: translateX(-100%); }
}

/* for Chrome */
@-webkit-keyframes scroll-left {
  from { -webkit-transform: translateX(100%); }
  to { -webkit-transform: translateX(-100%); }
}

@keyframes scroll-left {
  from {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }