.marquee {
  display: grid;
  overflow-x: clip;
  position: relative;
}

.marquee a {
  align-items: center;
  background: var(--color-black);
  display: flex;
  height: 1.5em;
  justify-self: center;
  overflow: hidden;
  position: relative;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  width: 102%;
}

.marquee a ul {
  color: var(--color-white);
  display: flex;
  font-size: var(--font-size-xxx-small);
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
  position: absolute;
  white-space: nowrap;
  will-change: transform;
}

.marquee a ul li {
  background: url('/assets/images/general/stars.svg') right center/4em auto no-repeat;
  margin: -0.3625em 1em -0.3125em 0;
  padding-right: 5em;
}



.marquee--left a {
  transform: rotate(1.2deg);
}

.marquee--left a ul {
  animation: marquee 120s linear infinite;
}

.marquee--right a {
  transform: rotate(-1.2deg);
}

.marquee--right a ul {
  animation: marquee 120s linear infinite;
}



@keyframes marquee {

  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }

}