/*
 * Default
 */
.page-section{
	
}


/*
 * Masthead intro
 */
.page-section__masthead-image{
	
	@include max-width-container();
	padding:0;
	position:relative;
	
	.foreground{
		width:100%;
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
		z-index:10;
		
		.grid-container{height:100%;z-index:10;}
		.grid-x{height:100%;}
		
		h1{font-size:5rem;line-height:5rem;margin-bottom:3rem;color:$white;font-weight:100;text-transform:lowercase;}
	}
	
	.background-image{
	
		height:30rem;
		overflow:hidden;
		
		img{width:100%;}
		
		div{
			width:100%;
			height:100%;
			background-repeat:no-repeat;
			background-size:cover;
		}
		&::after{
			content:"";
			position:absolute;
			bottom:3rem;
			right:3rem;
			width:3rem;
			height:3rem;
			background-image: url("data:image/svg+xml,%3Csvg data-name='Laag 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ccircle cx='256' cy='256' r='256' fill='%23fff'/%3E%3Cpath fill='%23303030' d='M129.32 289.49h-4.41v-53.16H82.04v53.16h-4.41v-57.57h51.69v57.57zM389.32 289.49h-4.41v-57.57h51.69v15.74h-4.41v-11.33h-42.87v53.16zM259.17 231.92h-40v57.57h4.41v-53.16h31.18v53.16h4.41v-53.16h31.18v53.16h4.41v-57.57h-35.59zM339.6 289.86a28.94 28.94 0 1128.94-28.94 29 29 0 01-28.94 28.94zm0-53.46a24.53 24.53 0 1024.53 24.52 24.55 24.55 0 00-24.53-24.52zM174.47 289.86a28.94 28.94 0 1128.94-28.94 29 29 0 01-28.94 28.94zm0-53.46A24.53 24.53 0 10199 260.92a24.55 24.55 0 00-24.53-24.52z'/%3E%3C/svg%3E");
		}
	
	}
	
	
	@include breakpoint(medium down)
	{
		.foreground h1{font-size:2.5rem;line-height:3rem;margin-bottom:1.5rem;}
		.background-image{
			height:15rem;
			&::after{bottom:1.5rem;right:1.5rem;}
		}
	}
		
	
}


/*
 * Gray background
 */
.page-section__background-gray
{
	@include max-width-container();
	padding:0;
	background-color:$light-gray;
	padding-top:3rem;
	padding-bottom:1.5rem;
}


/*
 * White background
 */
.page-section__background-white
{
	position:relative;
	padding-top:3rem;
	background-color:$white;
	&::after{
		content:"";
		position:absolute;
		background:$white;
		bottom:-1.5rem;
		left:0;
		right:0;
		height:1.5rem;
	}
	
}




.page-section__xl-image{
	padding-bottom:6rem;
	position:relative;
	

	@include breakpoint(medium large)
	{
		.column-wrapper{
			
		}		
		
		.grid-x div:nth-child(2) > div{
			padding-right:0;
			height:100%;
			width:50%;
			position:absolute;
			right:0;
			top:50%;
			transform:translateY(-50%);
			overflow:hidden;
		
			img{ 
				position: absolute; 
				right:0;
				//top:50%;transform:translateY(-50%);
				
			}
		
		
		}
			
		
	}	
}

.page-section__xl-image-left{
	
	padding-bottom:6rem;
	position:relative;
	
	@include breakpoint(medium large)
	{	
		.grid-x div:nth-child(1) > div{
			padding-right:0;
			height:100%;
			width:50%;
			position:absolute;
			left:0;
			top:50%;
			transform:translateY(-50%);
			overflow:hidden;

			img{ 
				position: absolute; 
				left:0;		
			}
		}

	}	
}