@keyframes wd-MarqueeScrolling {
from {
transform:translat3d(0, 0, 0)}
to {
transform:translate3d(calc(-100% - var(--wd-marquee-gap)), 0, 0)}
}
.wd-marquee {
--wd-marquee-gap: 20px;
--wd-marquee-direction: normal;
--wd-marquee-speed: 5s;
display:flex;
overflow:hidden;
gap:var(--wd-marquee-gap);
max-width:100vw}
.wd-marquee-content {
display:flex;
align-items:center;
justify-content:space-around;
flex-shrink:0;
gap:var(--wd-marquee-gap);
min-width:100%;
white-space:nowrap;
animation:var(--wd-marquee-speed) linear infinite var(--wd-marquee-direction) running wd-MarqueeScrolling}
.wd-marquee-item {
position:relative;
display:flex;
gap:10px;
align-items:center}
.wd-marquee-item>* {
margin-bottom:0}
.wd-marquee-item img.wd-lazy-load {
width:revert-layer}
@media (min-width: 1025px) {
.wd-marquee.wd-with-pause:hover .wd-marquee-content {
animation-play-state:paused}
}