.marqueegallery{
	--gap: 40px;
	overflow: hidden;
	display: flex;
	align-items: center;

	@media (max-width: 991px){
		--gap: 30px;
	}

	@media (max-width: 767px){
		--gap: 20px;
	}

	.inner{
		flex-shrink: 0;
		display: flex;
		gap: var(--gap);
		padding: 0 calc( var(--gap) / 2 );
		will-change: transform;
		contain: layout style;
		backface-visibility: hidden;
		transform-style: preserve-3d;


		a{
			flex-shrink: 0;
			display: block;

			&:nth-child(2n+1){
				margin-top: 168px;
			}

			img{
				object-fit: cover;
				width: 890px;
				max-width: calc( 100vw - var(--gap) - 20px );
				max-height: calc( 100svh - 200px - 170px );
				border-radius: 30px;
			}
			&:nth-child(2n+2) img{
				width: 670px;
			}
		}
	}

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

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

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

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