/*
 * ILM Components -- Video.
 *
 * The `<video>` is the component's root, so the width and shape settings apply
 * to the element itself and there is no wrapper to keep in step with it.
 *
 * `background: #000` matters more than it looks: a video element is
 * transparent until its first frame is decoded, and without it the poster gap
 * shows whatever is behind the element rather than reading as a video.
 */

.ilm-component--media-video {
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
	block-size: auto;
	background-color: #000;
	border-radius: var(--ilm-radius-md, 0.375rem);
}

.ilm-component--media-video.ilm-width-narrow { max-inline-size: 24rem; }
.ilm-component--media-video.ilm-width-normal { max-inline-size: 40rem; }
.ilm-component--media-video.ilm-width-wide { max-inline-size: 60rem; }
.ilm-component--media-video.ilm-width-full { max-inline-size: none; }

.ilm-component--media-video:not(.ilm-ratio-auto) {
	aspect-ratio: var(--ilm-c-ratio, 16 / 9);
	block-size: auto;
	object-fit: contain;
}