.hero-banner {
	position: relative;
	height: 400px;
	margin: 0 auto 1.5rem;
	max-width: 1920px;
}

@media (max-width: 768px) {
	.hero-banner {
		height: 240px;
	}
}

.hero-banner:before, .hero-banner:after {
	content: "";
	position: absolute;
	top: 0;
	height: 100%;
	background: #eeefef;
	opacity: 0.5;
	z-index: 999;
	width: calc(((100vw - 100%) / 2) + ((100% - var(--content-width)) / 2));
	--content-width: 1140px;
}

.hero-banner .hero-banner:before, .hero-banner .hero-banner:after {
	content: none;
}

.hero-banner:before {
	left: calc(((100vw - 100%) / 2) * -1);
}

.hero-banner:after {
	right: calc(((100vw - 100%) / 2) * -1);
}

@media (min-width: 1921px) {
	.hero-banner:before {
		background: linear-gradient(to left, rgba(238,239,239,0.5) 0, rgba(238,239,239,0.98) 350px, rgba(238,239,239,1) 400px);
		opacity: 1;
	}
	
	.hero-banner:after {
		background: linear-gradient(to right, rgba(238,239,239,0.5) 0, rgba(238,239,239,0.98) 350px, rgba(238,239,239,1) 400px);
		opacity: 1;
	}
}

/*
.hero-banner .hero-banner-content > .scEmptyPlaceholder {
    height: 100%;
}
*/

/*
.hero-banner .hero-banner-content {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100%;
    margin: auto;
    z-index: 2;
}
*/



/***** Variant Styles *****/

.homepage .hero-banner {
	height: 500px;
}

@media (max-width: 768px) {
	.homepage .hero-banner {
		height: 240px;
	}
}