.c-hero {
	position: relative;
	color: $hero--color;
	margin-bottom: spacing(16);

	@supports (display: flex) {
		@include media-query('md') {
			display: flex;
			flex-direction: row-reverse;
		}
	}
}

.c-hero--flush-md-max {
	@include media-query('md', 'max') {
		margin-left: $hero--container-margin-left;
		margin-right: $hero--container-margin-right;
	}
}

.c-hero__link {
	// @include u-link-faux-block;
	color: inherit;

	&:hover,
	&:visited {
		color: inherit;
	}
}

.c-hero__copy {
	display: flex;
	flex-direction: column;

	@include media-query('md') {
		flex: 1 1 50%;
	}
}

.c-hero__image {
	@include media-query('md') {
		flex: 1 1 50%;
		max-width: none;
		position: relative;
		overflow: hidden;
		min-height: $hero--image-min-height;
	}

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		vertical-align: top;
	}
}

.c-hero__copy {
	background-color: $hero--copy-background-color;
	padding: $hero--copy-padding;

	@supports (display: flex) {
		@include media-query('md') {
			max-width: $hero--copy-max-width;
		}
	}

	@include media-query('lg') {
		padding: $hero--copy-padding-at-lg;
	}
}

.c-hero__title {
	// @include u-h1;
	margin-bottom: $hero--title-margin;

	@include media-query('md') {
		font-size: $hero--title-font-size-at-md;
		line-height: $hero--title-line-height-at-md;
	}
}

.c-hero__summary {
	line-height: $hero--summary-line-height;
	margin-bottom: $hero--summary-margin-bottom;
	font-size: $hero--summary-font-size;
}
