@keyframes cwb-autoRun {
	from {
		left: 100%;
	}
	to {
		left: calc(var(--width) * -1);
	}
}

.cwb-slider {
	width: 100%;
	height: var(--height);
	overflow: hidden;
	mask-image: linear-gradient(to right, transparent, #000 10% 90%, transparent);
}

.cwb-slider-list {
	width: 100%;
	height: 100%;
	min-width: calc(var(--width) * var(--quantity));
	margin: 0;
	padding: 0;
	display: flex;
	position: relative;
}

.cwb-slider-item {
	left: 100%;
	width: var(--width);
	height: var(--height);
	padding: 0 1rem;
	box-sizing: border-box;
	list-style-type: none;
	animation: cwb-autoRun var(--duration) linear infinite;
	animation-delay: calc((var(--duration) / var(--quantity)) * (var(--position) - 1) - var(--duration));
	position: absolute;
}

.cwb-slider-item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.cwb-slider:hover .cwb-slider-item,
.cwb-slider:has(:focus-within) .cwb-slider-item {
	animation-play-state: paused;
}