*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--font-family-sans-serif: "Open Sans", sans-serif;
	--font-family-serif: Georgia, serif;

	--body-color: #001b27;
}

html,
body {
	font-family: var(--font-family-sans-serif);
	margin: 0;
	height: 100%;
	padding: 0;
}

.hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: 100%;
	height: -webkit-fill-available;
}

.hero .intro {
	background-color: #4b8a8b;
}

.hero .video-container {
	position: relative;
	padding-bottom: 56.25%;
}

.hero .video-container video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}