/**
 * Section
 */

 .section-background .section__header > *,
 .section-background .section__body > * {
	color: var(--color-white);
 }

 .section-background .section__header::before {
	background: var(--color-white-50);
}

.section-background__inner {
	position: relative;
	min-height: 30vh;
	max-width: 100%;
	display: grid;
	align-items: center;
	justify-content: center;
	text-align: center;
	z-index: 1;
	overflow: hidden;
	background-color: var(--color-dark);
}

.section-background__image,
.section-background__mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	overflow: hidden;	
}

.section-background__mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	overflow: hidden;	
	background-color: var(--background);
	opacity: 0.30;
}

.banner__image {
	z-index: -1;
}

.section-background__image img {
	width: 100%;
	height: 100%;
	display: block;
	overflow: hidden;
	object-fit: cover;
	object-position: center center;
}

.section-background__content .content-grid-inner {
	padding: 10vh 30px;
}

.section-background.section-content-dark .content-grid-inner {
	background-color: var(--background);
}

.section-background.section-content-color .content-grid-inner  {
	color: var(--color-white);
	background-color: var(--color-accent-dark);	
}

.section-background.section-content-color .section__title span {
	color: var(--color-white);	
}

.section-background.section-content-light .content-grid-inner  {
	color: var(--color-dark);
	background-color: var(--color-white);	
}

.section-background.section-content-light .section__title,
.section-background.section-content-light .section__body * {
	color: var(--color-dark);
}

.bg-mask-medium .section-background__mask {
	opacity: 0.5;
}

.bg-mask-dark .section-background__mask {
	opacity: 0.8;
}

.bg-mask-mono .section-background__mask { 
	opacity: 0.5;
	background: var(--background);
}

.bg-mask-mono .section-background__image img { 
	filter: grayscale(100%);
	opacity: 0.3;
}

.bg-mask-gradient .section-background__mask { 
	opacity: 1;
	background-color: var(--image-mask-50);
	background-image: linear-gradient(180deg, var(--color-dark) 0%, rgba(0,0,0,0) 100%);
}

.bg-mask-gradient .section-background__image img { 
	opacity: 0.4;
	filter: grayscale(100%);
}

.bg-mask-color .section-background__mask {
	opacity: 0.8;
	background-color: var(--color-accent-dark);
}

.bg-mask-color .section-background__image img { 
	filter: grayscale(100%);
	opacity: 0.8;
}


.bg-mask-color .button {
	color: var(--color-dark);
	border-width: 2px;
	border-color: var(--color-white);
	background-color: var(--color-white);
}

.bg-mask-color .button:hover,
.bg-mask-color .button:focus,
.bg-mask-color .button:active {
	color: var(--color-white);
	border-color: var(--color-white);
	background-color: var(--color-black-0);
}