/**
 * Simple Video Light-box
 *
 * https://wp-tutorials.tech/add-functionality/responsive-video-light-box/
 */

.svl-container {
	position:  relative;
	margin-bottom:  1em;
}

.svl-container > a {
	display:  block;
	border:  1px solid lightgrey;
	box-shadow: 0 0 1.00em rgba( 0, 0, 0, 0.20 );
	border-radius:  0.35em;
	overflow: hidden;
	background-color: grey;
}

.svl-container > a:hover {
	box-shadow: 0 0 1.00em rgba( 0, 0, 0, 0.40 );
}

.svl-container > a img {
	display:  block;
	width:  100%;
	object-fit:  cover;
}

.svl-container > a::before {
	content: url( 'standard-play-button.svg' );
	position:  absolute;
	left:  50%;
	top:  50%;
	width:  25%;
	max-width:  5em;
	transform: translate(-50%, -50%);
	transition: 0.3s;
	opacity: 0.85;
	z-index:  10;
}

.svl-container.youtube > a::before {
	content: url( 'youtube-play-button.svg' );
}

.svl-container > a:hover::before {
	opacity: 1.00;
}

.svl-container figcaption {
	text-align: center;
	position:  absolute;
/* 	font-weight: 700; */
	bottom:  0;
	width:  100%;
	padding: 0.5em 0;
	color:  white;
	background-color:  #333c;
	pointer-events: none;

	text-shadow:
	
		-2px -2px 0 #000,
		2px -2px 0 #000,
		-2px 2px 0 #000,
		2px 2px 0 #000;
}