.hero-block {
	background-color: #444;
	display: flex;
	flex-direction: column;
	height: 500px;
	overflow: hidden;
	position: relative;
}

.hero-block video,
.hero-block img {
	height: 100%;
	left: 0;
	object-fit: cover;
	opacity: .8;
	position: absolute;
	top: 0;
	z-index: 1;
	width: 100%;
}

.hero-text {
	background-color: rgba(255, 255, 255, .5);
	margin-top: auto;
	padding: 20px 0;
	position: relative;
	z-index: 2;
}

.hero-text p {
	margin: 0;
}

@media (min-width: 768px) {
	.hero-block {
		height: 1000px;
	}
}