:root {
	--iframe_width: min(90vw, calc(90vh * 16/9));
	--iframe_height: min(90vh, calc(90vw * 9/16));
	--video-width: calc(350rem);
	--video-margin: calc(20rem);
}

#video-lightbox {
	display: none;
	z-index: 2000;
}

#video-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: black;
	opacity: .85;
	z-index: inherit;
}

#video-lightbox img {
	position: fixed;
	right: calc(50vw - var(--iframe_width)/2 - calc(10rem));
	top: calc(50vh - var(--iframe_height)/2 - calc(20rem));
	width: calc(10rem);
	height: calc(10rem);
	z-index: inherit;
	cursor: pointer;
 }

#video-lightbox iframe {
	position: fixed;
	width: var(--iframe_width);
	height: var(--iframe_height);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 1;
	z-index: inherit;
}

.video-group {
	display: flex;
	flex-wrap: wrap;
	height: calc(2*var(--video-margin) + var(--video-width)/2);
	overflow: hidden;
	transition: height ease-in-out 0.5s;
}

a figure {
	position: relative;
	width: var(--video-width);
	height: calc(var(--video-width)/2);
	margin: var(--video-margin);
}

a figure:hover img {
	transform: scale(1.0);
	filter: contrast(0.5) brightness(40%);
}

figure::before, figure::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	padding: -20rem;
	margin: 20rem;
	transition: transform 0.3s;
}

figure::before {
	transform: scale(0, 1);
	border-top: 1px solid white;
	border-bottom: 1px solid white;
}

figure::after {
	transform: scale(1, 0);
	border-left: 1px solid white;
	border-right: 1px solid white;
}

figure:hover::before {
	transform: scale(1.05, 1);
}

figure:hover::after {
	transform: scale(1, 1.05);
}

figure img {
	align-content: center;
	width: inherit;
	height: inherit;
}

figure p {
	position: absolute;
	display: none;
	top: 50%;
	left: 50%;
	margin: auto;
	width: 80%;
	font-size: 24rem;
	color: white;
	text-transform:uppercase;
	transform: translate(-50%, -50%);
	text-align: center;
}

figure:hover p {
	display: inline-block;
}

.width-control {
	position: relative;
	width: calc(3*var(--video-width) + 6*var(--video-margin));
	padding: 50px calc(50vw - 1.5*var(--video-width) - 3*var(--video-margin));
}

.width-control h2, .width-control button {
	margin: 0;
	margin-left: var(--video-margin);
}

.width-control h2 {
	margin-bottom: 8rem;
}

.height-control {
	height: calc(2*var(--video-margin) + var(--video-width)/2) !important;
}

.contentFourVideos {
	display: block;
}

@media (max-width:1279px) {
	.height-control {
		height: calc(4*var(--video-margin) + var(--video-width)) !important;
	}

	.width-control {
		width: calc(2*var(--video-width) + 4*var(--video-margin));
		padding: 50px calc(50vw - var(--video-width) - 2*var(--video-margin));
	}

	.contentFourVideos {
		display: none;
	}
}

@media (max-width:879px) {
	.width-control {
		width: calc(var(--video-width) + 2*var(--video-margin));
		padding: 50px calc(50vw - 0.5*var(--video-width) - var(--video-margin));
	}

	.width-control h2, .width-control button {
		margin: 0 auto;
	}

	.width-control h2 {
		text-align: center;
	}

	.height-control {
		height: calc(6*var(--video-margin) + 1.5*var(--video-width)) !important;
	}

	.contentFourVideos {
		display: block;
	}
}

@media (max-width:390px) {
	.width-control {
		width: 100vw;
	}

	.height-control {
		height: calc(150vw + 60px) !important;
	}

	.video-group {
		justify-content: center;
	}
	
	a figure {
		width: calc(100vw - 20px);
		height: 50vw;
		margin: 10px 10px;
	}
}