:root {
  --size: clamp(10rem, 1rem + 40vmin, 30rem);
  --gap: calc(var(--size) / 14);
  --duration: 60s;
  --scroll-start: 0;
  --scroll-end: calc(-100% - var(--gap));
}
.marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
}
.marquee_group {
  font-size: 1.25rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-width: 100%;
  animation: scroll-x var(--duration) linear infinite;
}
.marquee {
  background: #312393;
  color: #fff;
  height: 50px;
}
.marquee img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(46%) saturate(2%)
    hue-rotate(17deg) brightness(107%) contrast(101%);
}
.marquee-reverse {
  background: #48cd96;
}
.marquee-reverse .marquee_group {
  animation-direction: reverse;
  animation-delay: -3s;
}
@keyframes scroll-x {
  from {
    transform: translateX(var(--scroll-start));
  }
  to {
    transform: translateX(var(--scroll-end));
  }
}

.wrapper {
  display: flex;
  flex-direction: column;
  margin: auto;
  max-width: 100vw;
}
.wrapper .marquee:first-child {
  transform: rotate(3.5deg);
  margin-bottom: -40px;
  position: relative;
  z-index: 1;
}
.marquee-reverse {
  color: #000;
}
.marquee-reverse img {
  filter: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(7500%)
    hue-rotate(229deg) brightness(93%) contrast(104%);
}