.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%;
		}
	}
}