.text-marquee {
  --text-marquee-rotate: 0deg;
  width: 100%;
  display: flex;
  overflow: hidden;
  padding-block: 0.8rem;
  margin-top: -0.8rem;
  z-index: 2;
  position: relative;
  transform: rotate(var(--text-marquee-rotate));
}
.text-marquee:first-child {
  margin-top: 5rem;
}
.text-marquee:last-child {
  margin-bottom: 10rem;
}

@media (max-width: 768px) {
  .text-marquee:first-child {
    margin-top: 2rem;
  }
  .text-marquee:last-child {
    margin-bottom: 4rem;
  }
}

.text-marquee__list {
  display: flex;
  flex: none;
  align-items: center;
  position: relative;
}

.text-marquee__item {
  display: flex;
  flex: none;
  align-items: center;
  margin-right:1rem;
}

.text-marquee__item--text {
  /* font-size + line-height via text-9xl (tailwind-overwrites.css) */
  font-family: var(--font-headline);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: #1D1D1B;
  text-shadow:
    1px  0   0 rgba(255, 255, 255, 0.45),
   -1px  0   0 rgba(255, 255, 255, 0.45),
    0    1px 0 rgba(255, 255, 255, 0.45),
    0   -1px 0 rgba(255, 255, 255, 0.45);
  pointer-events: none;
  user-select: none;
}

.text-marquee__item--image {
  padding-right: 0.1rem;
  pointer-events: none;
}

.text-marquee__item--image img {
  height: 0.7em;
  width: auto;
  display: block;
  object-fit: contain;
}

@keyframes tm-scroll {
  to { transform: translateX(-100%); }
}

[data-text-marquee-list] {
  animation: tm-scroll var(--tm-duration, 20s) linear infinite;
  will-change: transform;
}

[data-text-marquee][data-direction="right"] [data-text-marquee-list] {
  animation-direction: reverse;
}