.vf-homepage-video {
	position: relative;
	isolation: isolate;
	order: 0;
	width: min(860px, 100%);
	margin: 24px 0 16px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 16px;
	background: #050705;
}

.vf-homepage-video video,
.vf-homepage-video iframe {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.vf-homepage-video iframe {
	border: 0;
}

.vf-homepage-video--youtube {
	min-width: 200px;
	min-height: 200px;
}

.vf-homepage-video__poster {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	background: #050705;
	cursor: pointer;
}

.vf-homepage-video__poster[hidden],
.vf-homepage-video__fallback[hidden] {
	display: none;
}

.vf-homepage-video__poster img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.vf-homepage-video__play {
	position: relative;
	display: grid;
	width: clamp(56px, 9vw, 80px);
	aspect-ratio: 1;
	place-items: center;
	border: 2px solid #43d72c;
	border-radius: 50%;
	background: rgba(5, 7, 5, 0.9);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.vf-homepage-video__play::before {
	content: "";
	width: 0;
	height: 0;
	margin-left: 5px;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	border-left: 19px solid #43d72c;
}

.vf-homepage-video__poster:hover .vf-homepage-video__play,
.vf-homepage-video__poster:focus-visible .vf-homepage-video__play {
	background: #183318;
	box-shadow: 0 0 0 5px rgba(67, 215, 44, 0.2);
}

.vf-homepage-video__poster:focus-visible {
	outline: 3px solid #43d72c;
	outline-offset: -4px;
}

.vf-homepage-video__poster[aria-busy="true"] {
	cursor: progress;
}

.vf-homepage-video__fallback {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 8px 12px;
	background: #111411;
	color: #f5f0e4;
	font-size: 0.8rem;
	text-align: center;
}

.vf-homepage-video__fallback a {
	text-decoration: underline;
}