.mgs-wrap { overflow: hidden; width: 100%; box-sizing: border-box; }

.mgs-stage {
	--mgs-gap: 16px;
	--mgs-count: 4;
	--mgs-fixed: 320px;
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	row-gap: 16px;
}

.mgs-fade .mgs-stage {
	--mgs-fade: 8%;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--mgs-fade), #000 calc(100% - var(--mgs-fade)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--mgs-fade), #000 calc(100% - var(--mgs-fade)), transparent 100%);
}

.mgs-row { overflow: hidden; box-sizing: border-box; }

.mgs-track { display: flex; width: max-content; }
.mgs-group { display: flex; flex: none; }

.mgs-item {
	flex: none;
	margin-right: var(--mgs-gap);
	height: 230px;
	overflow: hidden;
	box-sizing: border-box;
	position: relative;
}

.mgs-mode-count .mgs-item {
	width: calc(((100cqw - var(--mgs-gap) * (var(--mgs-count) - 1)) / var(--mgs-count)) * var(--mgs-w, 1));
}
.mgs-mode-fixed .mgs-item {
	width: calc(var(--mgs-fixed) * var(--mgs-w, 1));
}

.mgs-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition-property: transform;
	transition-timing-function: ease;
	user-select: none;
	-webkit-user-drag: none;
}

/* Auto sliding */
.mgs-auto .mgs-track {
	animation: mgs-scroll var(--mgs-dur, 40s) linear infinite;
	animation-delay: var(--mgs-delay, 0s);
	will-change: transform;
}
.mgs-auto .mgs-row.mgs-rev .mgs-track { animation-direction: reverse; }
.mgs-pause:hover .mgs-track { animation-play-state: paused; }

@keyframes mgs-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.mgs-respect-rm .mgs-track { animation: none; }
}

/* Auto slide off: visitor scrolls by hand */
.mgs-static .mgs-row { overflow-x: auto; scrollbar-width: thin; }