// //////////////////////////////////////////
// // BANNER MODULE
// //////////////////////////////////////////

.banner-module{
	background-color: $banner-background-color;
	position: relative;
	margin: 0;
	color: $banner-color;

	.module-content{
		@include module-content($banner-module-width);
	}

	.module-text {
		width: 100%;
		padding: $banner-padding;
		position: relative;
		z-index: 2;
		color: $banner-color;
		text-align: $banner-text-align;
		overflow: hidden;

		& > *:last-child{
			margin-bottom: 0;
		}

		@for $i from 2 through 6 {

			h#{$i}{ 
				color: $banner-headline-color;
				font-weight: $banner-headline-font-weight;
			}
		}

		p{
			font-size: $banner-font-size;
			font-weight: $banner-font-weight;

			@include break(lf){
				font-size: rem($banner-font-size-max);
			}
		}

		.action{
			margin-bottom: 0;
			font-size: 1rem;
		}

		.button{
			width: 100%;
			max-width: rem(250);
			text-align: center;
		}
	}

	.image-container {
		@include image-container;
		z-index: 1;
		mix-blend-mode: $banner-blend-mode;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;

		&.b-loaded{
			opacity: $seperator-background-opacity;
		}
	}
}