.infinite-scroll {
	/**** Settings */
	--marquee-duration: 20s; /*##ms, ##s*/
	--marquee-gap: 20px; /* can be any spacing */
 	user-select: none; /* none, auto*/
	overflow: hidden;
	max-width: 100%;
    gap: var(--marquee-gap);
	--marquee-play-state: running; /*running, paused*/
	--marquee-direction: normal; /*normal, reverse, alternate, alternate-reverse*/
	--marquee-timeline: auto;
	--marquee-timing: linear;
	--marquee-iteration: infinite;
	--marquee-mode: none;
	--marquee-animation: marquee-horizontal;
	--marque-translate: translateX(0);
}

@media (prefers-reduced-motion) {
	.infinite-scroll{
		--marquee-duration: 500s;
	}
}
	
.infinite-scroll.is-faded {
	mask-image: linear-gradient(
					to left, 
					rgba(0, 0, 0, 0) 0%, 
					rgb(0, 0, 0) 20%, 
					rgb(0, 0, 0) 80%, 
					rgba(0, 0, 0, 0) 100%
				);
}
	
.infinite-scroll.is-reversed{
	--marquee-direction: reverse;
}
	
.infinite-scroll.is-rotated{
	transform: rotate(2.5deg);
	max-width: 110%;
	margin-left: -5%;
}

.infinite-scroll.is-slower>*{
	animation-duration: calc(var(--marquee-duration)*2);
}
	
.infinite-scroll.is-faster>*{
	animation-duration: calc(var(--marquee-duration)/2);
}

.infinite-scroll.on-hover-paused:hover{
 --marquee-play-state: paused; /*running, paused*/
}
	
.infinite-scroll>*{
    animation-name: var(--marquee-animation);
    animation-duration: var(--marquee-duration);
    animation-timing-function: var(--marquee-timing);
    animation-iteration-count: var(--marquee-iteration);
    animation-direction: var(--marquee-direction);
    animation-play-state: var(--marquee-play-state);
    animation-fill-mode: var(--marquee-mode);
    animation-timeline: var(--marquee-timeline);
    flex-shrink: 0;
    position: relative;
    transform: var(--marquee-translate);
}

.infinite-scroll>*>* {
    flex-shrink: 0;
}

/* add horizontal*/
@keyframes marquee-horizontal{
	to {
	    transform: translateX(calc(-100% - var(--marquee-gap)));
	}
}