/*------------------------------------*\
    #PROMO BLOCK
\*------------------------------------*/

/**
 * Large block containing an image and copy
 * 1) Move promo block up to sit flush with hero
 *    Normally we wouldn't do this, but we're taking
 *    a shortcut for demo purposes.
 */
.c-promo-block {
	color: $color-neutral-white;
	position: relative;
	margin-top: -2rem; /* 1 */
}

.c-promo-block__media {
	position: relative;
	z-index: 0;

	&:before {
		content: "";
		background: linear-gradient(
			to left,
			rgba(0, 0, 0, 0) 0,
			rgba(0, 0, 0, 0) 40%,
			#000 100%
		);
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;

		.c-promo-block--right & {
			background: linear-gradient(
				to right,
				rgba(0, 0, 0, 0)
					0,
				rgba(0, 0, 0, 0)
					20%,
				#000 100%
			);
		}
	}
}

.c-promo-block__body {
	position: absolute;
	top: 40%;
	left: 4rem;
	z-index: 1;
	max-width: 400px;
	transition: opacity $anim-fade-long $anim-ease,
		transform $anim-fade-long $anim-ease;

	.c-promo-block--right & {
		left: auto;
		right: 4rem;
	}

	&.c-promo-block__body--initial {
		opacity: 0;
		transform: translateY(70px);
	}
}

.c-promo-block__img {
	display: block;
	width: 100%;
}

.c-promo-block__link {
	color: $color-neutral-white;

	&:hover,
	&:focus {
		color: $color-brand-secondary;
	}
}

.c-promo-block__heading {
	display: inline;
	color: inherit;
	border-bottom: 2px solid $color-brand-secondary;
	font-size: $font-size-large;

	@media all and (min-width: $bp-large) {
		font-size: $font-size-xl;
	}
}

.c-promo-block__description {
	margin-top: 1rem;

	@media all and (min-width: $bp-large) {
		font-size: $font-size-med-2;
	}
}