.apc-slider {
	position: relative;
}

/* ------------------- */
/* VIEWPORT = SCROLL   */
/* ------------------- */
.apc-slider-viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;

	display: flex;
}

/* ------------------- */
/* TRACK               */
/* ------------------- */
.apc-slider-track {
	display: flex;
	width: 100%;
}

/* ------------------- */
/* SLIDES              */
/* ------------------- */
.apc-slider-track > * {
	flex: 0 0 100%;
	scroll-snap-align: start;

	position: relative;
	z-index: 1;
}

/* ------------------- */
/* FADE MODE           */
/* ------------------- */
.apc-slider.animation-fade .apc-slider-viewport {
	overflow: hidden;
}

.apc-slider.animation-fade .apc-slider-track {
	position: relative;
	min-height: 200px;
}

.apc-slider.animation-fade .apc-slider-track > * {
	inset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.apc-slider.animation-fade .apc-slider-track > * + * {
    margin-left: -100%;
}

.apc-slider.animation-fade .apc-slider-track > *.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* ------------------- */
/* PAGINATION          */
/* ------------------- */
.apc-slider-pagination {
	margin-top: 12px;
	display: flex;
	justify-content: flex-end;
	gap: 6px;
}

.apc-slider-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

.apc-slider-dot.active {
	background: black;
}

/* ------------------- */
/* DESKTOP BEHAVIOR    */
/* ------------------- */
@media (pointer: fine) {
	.apc-slider:not(.animation-fade) .apc-slider-viewport {
		overflow: hidden;
	}
}