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

@-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: #fefefe;
  font-size: var(--step-0);
  height: calc(var(--fs-xl) * 2);
  position: relative;
  width: 100vw;
}
.marquee img {
  -o-object-fit: cover;
  object-fit: cover;
  max-height: 150px;
}

.marquee-track {
  height: 100%;
  overflow: hidden;
  position: absolute;
  transition: background-color 300ms ease, color 300ms ease;
  white-space: nowrap;
}
.marquee-track h2 {
  font-size: calc(var(--fs-xl) * 1.7);
}
.marquee-track .marquee-text {
  -webkit-animation: marquee 50000ms linear infinite;
  animation: marquee 50000ms linear infinite;
  align-items: center;
  display: inline-flex;
  will-change: transform;
  color: rgb(70, 70, 70);
}
.marquee-track .marquee-text.-r {
  -webkit-animation-name: marquee-r;
  animation-name: marquee-r;
}
.marquee-track .marquee-text.-twox {
  -webkit-animation-duration: 25000ms;
  animation-duration: 25000ms;
  /* padding-left: 64px; */
}
/* .marquee-track:hover {
  background-color: #efefef;
  color: #1a1f24;
} */
.marquee-track:hover img {
  -webkit-animation: rollCage 10000ms linear infinite;
  animation: rollCage 10000ms linear infinite;
}
/* .marquee-track:hover .-green {
  color: #beb9a3;
} */
.marquee-track-wrapper {
  flex: 1 1 auto;
  display: flex;
  flex-flow: row nowrap;
  position: relative;
  width: 100%;
  min-height: 100%;
  min-width: 0;
}
.-green {
  color: #fcd800;
  font-weight: 900;
  /* padding-left: 64px; */
}