.marqueetext{
	--gap: 64px;
	overflow: hidden;
	display: flex;
	align-items: center;

	.inner{
		white-space: nowrap;
		padding: 0 calc( var(--gap) / 2 );
		will-change: transform;
		contain: layout style;
		backface-visibility: hidden;
		transform-style: preserve-3d;
	}

	&.play .inner{
		animation: marqueetext var(--duration) infinite linear;
	}

	&.direction-right.play .inner{
		animation: marqueetext-right var(--duration) infinite linear;
	}
}

@keyframes marqueetext{
	0%{
		transform: translate3d( 0%, 0, 0 );
	}
	100%{
		transform: translate3d( -100%, 0, 0 );
	}
}

@keyframes marqueetext-right{
	0%{
		transform: translate3d( -100%, 0, 0 );
	}
	100%{
		transform: translate3d( 0%, 0, 0 );
	}
}

@media (max-width: 991px){
	.marqueetext{
		--gap: 48px;
	}
}