.slider-section {
	--slides-visible: 5;
	--gap: 16px;
	--fade-color: 255, 255, 255;
	position: relative;
	box-sizing: border-box;
}

.slider-viewport {
	overflow: hidden;
	touch-action: pan-y;
	user-select: none;
	cursor: grab;
}

.slider-section.is-dragging .slider-viewport {
	cursor: grabbing;
}

.slider-track {
	display: flex;
	gap: var(--gap);
	will-change: transform;
	transform: translate3d(0, 0, 0);
}

.slide-item {
	flex: 0 0
		calc(
			(100% - (var(--gap) * (var(--slides-visible) - 1))) /
				var(--slides-visible)
		);
	min-width: 200px;
	user-select: none;
}

.slide-media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background-color: #f0f0f0;
}

.slide-media img,
.slide-media video {
	object-fit: cover;
	user-select: none;
	-webkit-user-drag: none;
}

/* --- GRADIENTE LATERALE --- */
.slider-section.has-fade::before,
.slider-section.has-fade::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 400px;
	max-width: 400px;
	z-index: 2;
	pointer-events: none;
}

.slider-section.has-fade::before {
	left: 0;
	background: linear-gradient(
		to right,
		rgba(var(--fade-color), 1) 0%,
		rgba(var(--fade-color), 1) 20%,
		rgba(var(--fade-color), 0) 100%
	);
}

.slider-section.has-fade::after {
	right: 0;
	background: linear-gradient(
		to left,
		rgba(var(--fade-color), 1) 0%,
		rgba(var(--fade-color), 1) 20%,
		rgba(var(--fade-color), 0) 100%
	);
}

/* PLAY BUTTON */
.play-button {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	gap: 6px;
	background: rgba(255, 255, 255, 0.45);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	cursor: pointer;
	border: none;
	transition:
		transform 0.25s ease,
		background-color 0.25s ease;
}

.play-button svg {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	padding: 3px;
}

.play-button:hover {
	transform: translate(-50%, -50%) scale(1.05);
	background: rgba(255, 255, 255, 0.7);
}

/* RESPONSIVE */
@media (max-width: 1200px) {
	.slider-section.has-fade::before,
	.slider-section.has-fade::after {
		width: 200px;
	}
}

@media (max-width: 1023px) {
	.slider-section {
		--slides-visible: 3 !important;
	}
}

@media (max-width: 768px) {
	.slider-section.has-fade::before,
	.slider-section.has-fade::after {
		width: 100px;
	}
}

@media (max-width: 549px) {
	.slider-section {
		--slides-visible: 1.5 !important;
	}
}