.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	padding: 50vh var(--s-sm) var(--s-xs);

	@media (min-width: 768px) {
		padding: var(--s-md) var(--s-lg) var(--s-sm);
	}

	&.mod-size-sm {
		padding: 30vh var(--s-sm) var(--s-xs);

		@media (min-width: 768px) {
			min-height: calc(50vh - var(--h-header-full));
		}
	}

	&.mod-size-md {
		@media (min-width: 768px) {
			min-height: calc(60vh - var(--h-header-full));
		}
	}

	&.mod-size-lg {
		@media (min-width: 768px) {
			min-height: calc(70vh - var(--h-header-full));
		}
	}

	&:after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
	}

	> video,
	> div {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	> div {
		background-size: cover;
		background-position: center;

		@media (min-width: 768px) {
			background-attachment: fixed;
		}
	}

	> h1 {
		position: relative;
		overflow: hidden;
		z-index: 1;
		color: var(--c-white);
		text-align: center;

		> span {
			display: inline-block;
			opacity: 0;
			animation: slide-up-in var(--a-s-md) ease-out forwards;
			animation-delay: var(--a-s-lg);

			> small {
				display: block;
				font-size: 0.5em;
				letter-spacing: 1px;
			}
		}
	}
}