.hero {
	position: relative;
	height: 400px;
	margin: 0 auto 1.5rem;
	max-width: 1920px;
}



	/****overlay***/
	.hero:before, .hero: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 .hero:before, .hero .hero:after {
		content: none;
	}

	.hero:before {
		left: calc(((100vw - 100%) / 2) * -1);
	}

	.hero:after {
		right: calc(((100vw - 100%) / 2) * -1);
	}

@media (min-width: 1921px) {
	.hero: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: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__content {
	height: 100%;
	overflow: hidden;
}

	.hero__content > .widget {
		height: 100%;
		margin-bottom: 0;
	}

	.hero__content > *:not(.hero__extension) {
		position: relative;
		/*z-index: 1;*/
	}


/*
.hero__extension {
	position: absolute;
	height: 100%;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

	.hero__extension:before, .hero__extension:after {
		position: absolute;
		top: 0px;
		width: 100vw;
		height: 100%;
		z-index: 2;
		content: "";
	}

	.hero__extension::before {
		left: 0;
		transform: translateX(-100%);
		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__extension::after {
		right: 0;
		transform: translateX(100%);
		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;
	}

@media (max-width: 768px) {
	.hero {
		height: 240px;
	}
}
*/

/***** Variant Styles *****/
.homepage .hero {
	height: 500px;
}

@media (max-width: 768px) {
	.homepage .hero {
		height: 240px;
	}
}

.hero.widet:has(.video-frame) {
	height: auto;
}