:root {
    --marquee-speed: 20s;
    --marquee-hover-offset: -50px;
    --marquee-hover-transition-speed: .7s;
    --marquee-fade-edges: 30%;
  }
  
.marquee {
    overflow: hidden;
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 var(--marquee-fade-edges), #000 calc(100% - var(--marquee-fade-edges)), rgba(0, 0, 0, 0) 100%);
}
.marquee, .marquee > div {
    display: flex;
    white-space: nowrap;
    padding: 2dvh;
    gap: 10px;
    margin: auto -10px;
}
.marquee > div {
    animation: animate-marquee var(--marquee-speed) infinite linear;
    transition: var(--marquee-hover-transition-speed) margin-left ease-out;
    will-change: transform, margin-left;
}
.marquee:hover > div {
    animation-play-state: paused;
}
@keyframes animate-marquee {
    0% {
        transform: translateX(0%) translateZ(0);
   }
    100% {
        transform: translateX(-100%) translateZ(0);
   }
}