/*------------------------------------*\
	#HERO BLOCK
\*------------------------------------*/

/**
 * 1) Sit hero flush with header. Normally we wouldn't 
 *    do this and handle margin using utility classes,
 *    but we're taking a shortcut for a demo.
 */
.c-hero {
	display: block;
	position: relative;
	margin: -2rem 0 2rem; /* 1 */
}

/**
 * Hero Image
 * 1) This is the primary hero image that runs full-bleed across the layout
 */
.c-hero__img {
	display: block;
	width: 100%;
	object-fit: cover;
	max-height: 70vh;
	overflow: hidden;
}

.c-hero__body {
	background: $color-brand-secondary;
	padding: $spacing;

	@media all and (min-width: $bp-small-2) {
		padding: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0) 0,
			rgba(0, 0, 0, 0) 20%,
			#000 100%
		);
	}
}

/**
 * Hero Headline
 * 1) This sits overtop of the hero image when space permits
 */
.c-hero__headline {
	text-transform: uppercase;
	font-size: $font-size-xl;
	background-color: $color-brand-secondary;
	color: $color-neutral-white;
	transition: all $anim-fade-quick $anim-ease;

	@media all and (min-width: $bp-small-2) {
		padding: 0 0.4rem;
		font-size: $font-size-xxl;
	}
}