:root {
  --step--2: clamp(3.13rem, 2.62rem + 2.51vw, 5.76rem);
  --step--1: clamp(3.75rem, 3.09rem + 3.29vw, 7.20rem);
  --step-0: clamp(4.50rem, 3.64rem + 4.29vw, 9.00rem);
}

@-webkit-keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@-webkit-keyframes marquee-r {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes marquee-r {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@-webkit-keyframes rollCage {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(5turn);
  }
}
@keyframes rollCage {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(5turn);
  }
}

.marquee {
  color: #ffffff;
  font-size: var(--step-0);
  height: calc(140px + 3rem);
  overflow: hidden;
  position: relative;
  width: 100%;
  font-family: "Gendy", sans-serif;
}

.marquee img {
  -o-object-fit: cover;
     object-fit: cover;
  max-height: 100px;
}

.track {
  overflow: hidden;
  padding: .5rem .5rem;
  position: absolute;
  transition: background-color 300ms ease, color 300ms ease;
  white-space: nowrap;
}
.track .text {
  -webkit-animation: marquee 30000ms linear infinite;
          animation: marquee 30000ms linear infinite;
  align-items: center;
  display: inline-flex;
  will-change: transform;
}
.track .text.-r {
  -webkit-animation-name: marquee-r;
          animation-name: marquee-r;
}
.track .text.-twox {
  -webkit-animation-duration: 25000ms;
          animation-duration: 25000ms;
}
.track:hover {
  background-color: rgba(121, 41, 168, 0.35);
  color: #1A1F24;
}
.track:hover img {
  -webkit-animation: rollCage 10000ms linear infinite;
          animation: rollCage 10000ms linear infinite;
}
.track:hover .-green {
  color: #7d4c48;
}

.-green {
  font-family: "Gendy", sans-serif;
  color: #FA7C7C;
  background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: hue 10s infinite linear;
}

@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}