.header {	
	--padding-inline: var(--bs-gutter-x,.75rem);
	--content-max-width: calc(var(--container-width) - 3 * var(--column-width) - var(--bs-gutter-x,.75rem) - var(--bs-gutter-x,.75rem));
	--narrow-size-reduction: calc(3 * var(--column-width));

	/* for calculations */
	--_narrow-column-size: calc(
	(var(--content-max-width) - var(--narrow-size-reduction)) / 2
	);
	--_content-column-size: var(--narrow-size-reduction);

	display: grid;
	grid-template-columns:
		[full-width-start] minmax(var(--padding-inline), 1fr)
		[content-start] minmax(0, var(--_content-column-size))
		[narrow-start]
		min(50% - var(--padding-inline), var(--_narrow-column-size))
		[center-line]
		min(50% - var(--padding-inline), var(--_narrow-column-size))
		[narrow-end]
		minmax(0, var(--_content-column-size))
		[content-end]
		minmax(var(--padding-inline), 1fr) [full-width-end];
	overflow: hidden;
	padding-top: calc(var(--jumbotron-standard-margin) + var(--body-padding)) !important;
    position: relative;
    isolation: isolate;
}

body:has(.header:first-child){
	margin-top: calc(-1 * var(--body-padding));
}

.header .col-xl-7 p{
    max-width: 52.5rem;
}

.header .container{
	grid-column: content;
    padding: 0;
}

.header_afbeelding{
	grid-column: narrow-start / full-width-end;
	position: absolute;
	right: 0;
    top: 50%;
    transform: translateY(-50%);
	z-index: -1;
	min-height: 100%;
}

.header_afbeelding picture{
	display: flex;
	width: 100%;
	height: 100%;
}

.header_afbeelding img{
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.header_afbeelding:before{
	content: "";
	background:
  linear-gradient(to right, #004D42 4.73%, rgba(0, 77, 66, 0.00) 88.1%),
  linear-gradient(rgba(28, 31, 35, 0.67), rgba(28, 31, 35, 0.67));
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.header_groot{
	min-height: 100svh;
	padding-top: var(--body-padding) !important;
	padding-bottom: clamp(8rem, 20vh, 18rem) !important;
	align-items: end;
}

.header_groot .container{
	align-self: end;
}

.header_groot .row{
	align-items: flex-end;
}

.header_groot header,
.header_groot header h1,
.header_groot .content_gekaderd_inner,
.header_groot .content_gekaderd_inner :is(p, ul, ol){
	color: var(--beige);
}

.header_groot header h1{
	font-size: clamp(4.2rem, 6vw, 8rem);
	letter-spacing: -0.08rem;
}

.header_groot .content_gekaderd_inner > p{
	max-width: 52.6rem;
	font-size: 1.8rem;
	line-height: 1.21;
}

.header_groot .header_afbeelding{
	grid-column: full-width;
	position: absolute;
	inset: 0;
	transform: none;
	min-height: 0;
}

.header_afbeelding:before{
    background:
        linear-gradient(to top, #004D42 0%, rgba(0, 77, 66, 0.00) 62%),
        linear-gradient(to right, #004D42 4.73%, rgba(0, 77, 66, 0.00) 88.1%),
        linear-gradient(rgba(28, 31, 35, 0.67), rgba(28, 31, 35, 0.67));
}

.header_groot .header_afbeelding:before{
    background:
        linear-gradient(to top, var(--groen) 0%, rgb(0 77 66 / 0%) 62%),
        linear-gradient(244.47deg, rgb(0 77 66 / 0%) 4.644%, var(--groen) 71.147%);
}

.header_training_info{
	background: radial-gradient(ellipse at center, rgb(255 255 255 / 15%) 0%, rgb(255 255 255 / 10%) 100%);
	border: 0.1rem solid rgb(255 255 255 / 15%);
}

.header_training_info h2{
	color: var(--oranje) !important;
}

.header_training_info_items{
	display: flex;
	flex-direction: column;
	gap: 3rem;
	width: 100%;
}

.header_training_info_item + .header_training_info_item{
	padding-top: 3rem;
	border-top: 0.1rem solid rgb(247 245 240 / 20%);
}

.header_training_info_label{
	margin-bottom: 0.5rem;
	font-size: 1.2rem;
	line-height: 1.5rem;
}

@media (max-width:767px)
{		
	.header_groot{
		min-height: 80svh;
		padding-bottom: 6rem !important;
	}

	.header_groot header h1{
		font-size: 4.2rem;
	}

	.header_groot .content_gekaderd_inner > p{
		font-size: 1.6rem;
	}
    
    .header_afbeelding{
	    grid-column: full-width-start / full-width-end;
        min-height: 0;
        top: 0;
        transform: none;
    }
}

@media (min-width:768px) and (max-width:991px)
{
	.header_groot header h1{
		font-size: 5.6rem;
	}
    
    .header_afbeelding{
	    grid-column: full-width-start / full-width-end;
        min-height: 0;
        top: 0;
        transform: none;
    }
}

@media (min-width:992px) and (max-width:1199px)
{
    .header_afbeelding{
        min-height: 0;
        top: 0;
        transform: none;
    }
}

@media (min-width:1200px) and (max-width:1399px)
{
    
}