.rs-showcase,
.rs-showcase * {
	box-sizing: border-box;
}

.rs-showcase {
	--rs-gap: clamp(16px, 2.2vw, 30px);
	width: 100%;
}

.rs-showcase__track {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--rs-gap);
	max-width: 1760px;
	margin: 0 auto;
}

.rs-reel {
	position: relative;
	min-width: 0;
	overflow: hidden;
	border-radius: clamp(18px, 1.5vw, 27px);
	background: #151515;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07);
	aspect-ratio: 9 / 16;
	transform: translateZ(0);
}

.rs-reel__link,
.rs-reel__media {
	display: block;
	width: 100%;
	height: 100%;
}

.rs-reel__link {
	color: #fff;
	text-decoration: none;
}

.rs-reel__link:focus-visible {
	outline: 4px solid #49cdea;
	outline-offset: -4px;
}

.rs-reel__video,
.rs-reel__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rs-reel__video {
	background: #111;
}

.rs-reel__placeholder {
	background:
		radial-gradient(circle at 72% 20%, rgba(255,255,255,.22), transparent 24%),
		linear-gradient(155deg, #6d28d9 0%, #db2777 46%, #f97316 100%);
}

.rs-reel__overlay {
	position: absolute;
	z-index: 2;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
	pointer-events: none;
}

.rs-reel__sound {
	position: absolute;
	z-index: 5;
	right: clamp(14px, 1.2vw, 21px);
	top: clamp(58px, 5vw, 82px);
	display: grid;
	place-items: center;
	width: clamp(34px, 2.7vw, 44px);
	height: clamp(34px, 2.7vw, 44px);
	padding: 8px;
	border: 1px solid rgba(255,255,255,.42);
	border-radius: 999px;
	color: #fff;
	background: rgba(12,12,12,.5);
	box-shadow: 0 2px 8px rgba(0,0,0,.2);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	cursor: pointer;
	opacity: 0;
	transform: translateY(5px);
	transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

.rs-reel:hover .rs-reel__sound,
.rs-reel:focus-within .rs-reel__sound,
.rs-reel.is-playing .rs-reel__sound {
	opacity: 1;
	transform: translateY(0);
}

.rs-reel__sound:hover,
.rs-reel__sound:focus-visible {
	background: rgba(12,12,12,.78);
}

.rs-reel__sound:focus-visible {
	outline: 3px solid #49cdea;
	outline-offset: 2px;
}

.rs-reel__sound svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: #fff;
	stroke: #fff;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.rs-reel__sound .rs-reel__sound-on,
.rs-reel__sound[aria-pressed="true"] .rs-reel__sound-off {
	display: none;
}

.rs-reel__sound[aria-pressed="true"] .rs-reel__sound-on {
	display: block;
}

@media (max-width: 1024px) {
	.rs-showcase__track {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.rs-showcase {
		--rs-mobile-card-width: min(82vw, 360px);
		--rs-mobile-side-space: calc((100% - var(--rs-mobile-card-width)) / 2);
	}

	.rs-showcase__track {
		display: flex;
		overflow-x: auto;
		max-width: none;
		padding: 0 var(--rs-mobile-side-space) 10px;
		scroll-padding-inline: var(--rs-mobile-side-space);
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		overscroll-behavior-inline: contain;
		-webkit-overflow-scrolling: touch;
	}

	.rs-showcase__track::-webkit-scrollbar {
		display: none;
	}

	.rs-reel {
		flex: 0 0 var(--rs-mobile-card-width);
		scroll-snap-align: center;
		scroll-snap-stop: always;
	}

	.rs-reel__sound {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rs-reel__sound {
		transition: none;
	}
}