.wrap {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 0vh 0 0vh;
  --marquee-width: 100vw;
  --offset: 20vw;
  --move-initial: calc(-25% + var(--offset));
  --move-final: calc(-50% + var(--offset));
  --item-font-size: 10vw;
  counter-reset: menu;
}
.wrap__item {
  cursor: default;
  position: relative;
  padding: 52px 0vw;
}

.marquee {
  position: relative;
  overflow: hidden;
  --offset: 20vw;
  --move-initial: calc(-25% + var(--offset));
  --move-final: calc(-50% + var(--offset));
}

.marquee__inner {
  width: fit-content;
  display: flex;
  position: relative;
  transform: translate3d(var(--move-initial), 0, 0);
  animation: marquee 20s linear infinite;
  animation-play-state: running;
}

.marquee span {
  padding: 0 1vw;
  text-transform: uppercase;
}

.section-categories {
  line-height: 1.18;
  font-weight: bold;
}
.marquee__inner {
  white-space: nowrap;
}
@keyframes marquee {
  0% {
    transform: translate3d(var(--move-initial), 0, 0);
  }

  100% {
    transform: translate3d(var(--move-final), 0, 0);
  }
}

//MARQUEE
.marquee-section {
  background-color: #e5e5e5;
  position: relative;
  .font {
   // -webkit-text-fill-color: transparent;
   // -webkit-text-stroke: 1px $light-blue;
   color: $light-blue;
  }
}
@media screen and (max-width: 1300px) {
  .marquee-section {
    padding-bottom: 90px;
  }
}

@media (max-width: 600px) {
  .wrap__item {
    padding: 36px 0;
    .fs-4xl {
      font-size: 58px;
    }
  }
  .marquee__inner {
    animation: marquee 10s linear infinite;
  }
}
@media screen and (max-width: 400px) {

  .marquee-section {
    padding-bottom: 10%;
  }
}