.cvyt {
	--cvyt-accent: #e30613;
	--cvyt-r: 16 / 9;
	--cvyt-w: 900px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	width: 100%;
	margin: 0 auto;
	position: relative;
}
.cvyt--v {
	--cvyt-r: 9 / 16;
	--cvyt-w: min(340px, calc(75vh * 9 / 16));
}

.cvyt__col { flex: 0 1 var(--cvyt-w); min-width: 0; display: flex; flex-direction: column; align-items: center; }
.cvyt__stage {
	width: 100%;
	max-width: var(--cvyt-w);
	aspect-ratio: var(--cvyt-r);
	background: #000;
	position: relative;
	overflow: hidden;
}
.cvyt__stage iframe, .cvyt__target { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.cvyt__count { margin: 10px 0 0; font-size: .85em; opacity: .65; }

.cvyt__nav {
	position: relative;
	flex: 0 0 auto;
	width: 52px; height: 52px; padding: 0;
	border: 0; border-radius: 0;
	background: var(--cvyt-accent);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
	transition: background .15s ease;
}
.cvyt__nav:hover { background: #ce0613; }
.cvyt__nav:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
.cvyt__nav[hidden], .cvyt__count[hidden] { display: none; }
/* Freccina disegnata in CSS, centrata nel quadrato */
.cvyt__nav::before {
	content: ""; position: absolute; top: 50%; left: 50%;
	width: 14px; height: 14px; border: solid #fff; border-width: 0 0 3px 3px;
}
.cvyt__nav--prev::before { transform: translate(calc(-50% + 3px), -50%) rotate(45deg); }
.cvyt__nav--next::before { transform: translate(calc(-50% - 3px), -50%) rotate(-135deg); }

/* Telefono: le frecce vanno sopra ai lati del video, per non rubargli spazio. */
@media (max-width: 640px) {
	.cvyt { gap: 0; }
	.cvyt__nav { position: absolute; top: 50%; z-index: 2; width: 42px; height: 42px; margin-top: -31px; background: rgba(227, 6, 19, .88); }
	.cvyt__nav--prev { left: 6px; }
	.cvyt__nav--next { right: 6px; }
}