/* set up custom properties to take well known values from theme */

.overlaid-image {

	/* make window width */
	
	width: 100vw;

	position: relative;
	left: 50%;
	transform: translateX(-50%);

	margin-left: 0 !important;
	max-width: 3000px !important;
	
	/* vertical flow */
	margin: 60px 0;
	
	/* layout */
	position: relative;
	aspect-ratio: 2 / 1;
	

}

.overlaid-image img {
	aspect-ratio: 2 / 1;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.overlaid-image > div {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	width: 100%;
	
	background: rgba(0,0,0,.5);
	color: white;
	
	text-align: center;
	font-size: 2em;
	
	box-sizing: border-box;
	padding: 0 20px;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	
	align-items: center;
}

.overlaid-image h2,
.overlaid-image h3 {
	margin: 0 auto;
	text-align: center;
	color: white;
}

.overlaid-image > div > :first-child {
	margin-top: 0;
}
.overlaid-image > div > :last-child {
	margin-bottom: 0;
}
.overlaid-image > div > div > :last-child {
	margin-bottom: 0;
}

.button {
white-space: nowrap;
font-size: 18px;
line-height: 1;
display: inline-block;
text-decoration: none;
margin: 1.1em 0 1.2em;
color: #d4d4d4;

border-radius: 28px;
padding: 0.78em 1.8em 0.8em;
background: rgba(0, 0, 0, 0.66);
}
.button:hover {
background: #030303;
color: #fff;
}