hero.scss

//*!--------------------------------------------------------------
// Gutenberg Hero Block
//--------------------------------------------------------------

$color-black: #000;
$color-white: #fff;

.wds-hero {
	margin-bottom: 0;
	overflow-y: hidden;
	position: relative;
	z-index: 1;

	//*!Transparent overlay.
	&::after {
		background-color: rgba($color-black, 0.5);
		content: '';
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 2;
	} // &:after

	// Content container.
	&-content {
		align-items: center;
		color: $color-white;
		display: flex;
		flex-direction: column;
		height: 500px;
		justify-content: center;
		margin: 0 auto;
		max-width: 50%;
		position: relative;
		text-align: center;
		z-index: 3;
	} // .wds-hero-content

	// Set title text color.
	&-title {
		color: $color-white;
		margin: 0 0 20px 0;
	} // .wds-hero-description

	// Add padding to description.
	&-description {
		color: $color-white;
		margin: 0 0 15px 0;
	} // .hero-description

	// Set button text color.
	.wds-button-hero {
		color: $color-white;
	} // a.wds-button-hero

	.image-background {
		display: block;
		height: 100%;
		margin: 0;
		object-fit: cover;
		object-position: center center;
		position: absolute;
		width: 100%;
		z-index: -1;

		img {

			height: 100%;
			object-fit: cover;
			width: 100%;
		}
	} // .image-background
} // .hero

//-----------------------------------------
// IE Fixes
//-----------------------------------------
.ie .wds-hero {

	// IE seems to have some width issues with flexbox,
	// the text is rendered wider than its container
	// and doesn't wrap. This fixes that.
	.wds-hero-title,
	.wds-hero-description {
		width: 100%;
	} // .wds-hero-title, .wds-hero-description
} // .ie .wdshero