.wrapper {
	width: 90%;
	max-width:100%;
	margin-inline: auto;
	position: relative;
	height: 100px;
	overflow: hidden;
	mask-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0),
		rgba(0, 0, 0, 1) 20%,
		rgba(0, 0, 0, 1) 80%,
		rgba(0, 0, 0, 0)
	);
	opacity:.8;
}

@keyframes scrollLeft {
	to {
		left: -50%;
	}
}

.item {
	display:flex;
	justify-content:center;
	align-items:center;

	width: var(--hslide-width);
	height: 100px;
	background-color:transparent;
	position: absolute;
	left: max(calc(var(--hslide-width) * var(--hslide-count)), var(--hslide-width));
	animation-name: scrollLeft;
	animation-duration: var(--hslide-duration);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.item img {
	width:auto;
	height:auto;
	max-width:100%;
	max-height:100%;
}