.vid-pop {
	--vid-pop-itm-h: 428; /* { readonly: true } */
	--vid-pop-itm-h-mbl: 200; /* { readonly: true } */

	--vid-pop-itm-h-clc: calc((var(--vid-pop-itm-h-mbl) * 1px) + (var(--vid-pop-itm-h) - var(--vid-pop-itm-h-mbl)) * ((var(--vw_) - 320px) / (1920 - 320))); /* { readonly: true } */
}

.vid-bx {
	.pop {
		background-color: hsl(from var(--black) h s l / 0.8);
		backdrop-filter: blur(5px);
	}
}

.ply-btn {
	padding: 1em;
	font-size: 1rem;
	border-radius: 50%;

	&.iso {
		position: absolute;
		bottom: 1.11rem;
		left: 2rem;
	}
}

.ft {
    position: absolute;
    top: 0;
    right: clamp(var(--sp-vp-min), var(--sp-vp), var(--sp-vp-max));
    font-size: 2rem;
    z-index: 1;
}

.pop {
	ul li {
		position: relative;

		> div {
			width: 100%;
		}

		video {
			object-fit: contain;
			margin-inline: auto;
			max-height: var(--vid-pop-itm-h-clc);
		}

		figure {
			aspect-ratio: initial;
			max-height: var(--vid-pop-itm-h-clc);
			width: 100%;
		}
	}
}

/* -- Video Popup (moved from component-local VideoPopup.css) ---- */

.vid-popup {

	/* -- Foreground image button ----------------------- */

	.fg-img-btn {
		display: block;
		cursor: pointer;

		picture {
			display: block;

			img {
				display: block;
				width: 100%;
				height: auto;
				transition: transform 0.4s ease;
			}
		}

		@media (hover: hover) and (pointer: fine) {
			&:hover img { transform: scale(1.04); }
		}

	}

	/* -- Play button ----------------------------------- */

	.ply-btn {
		background-color: var(--white);
		transition: background-color 0.3s ease;
		@media screen and (min-width:1280px) {
			& {
				padding: 1.1em;
				font-size: 2.2rem;
			}
		}

		.icn {
			color: var(--buttons);
		}

		@media (hover: hover) and (pointer: fine) {
			.fg-img-btn:hover & { background-color: var(--buttons); }
			.fg-img-btn:hover & .icn { color: var(--white); }
		}
	}

}