.header {
	position: relative;
	background: #edeae5;
	overflow: hidden;
}

.header_container {
	position: relative;
}

.header_container_inner {
	position: relative;
	z-index: 2;
}

.header_container_inner header h1,
.header_container_inner > h1:first-child {
	margin-bottom: clamp(2.4rem, 3vw, 3rem);
	font-size: clamp(4.4rem, 4.15vw, 7rem);
	line-height: 1.2;
}

.header_media_col {
    display: flex;
    justify-content: center;
}

.header_afbeeldingen {
	display: grid;
	align-items: start;
	pointer-events: none;
}

.header_container_inner_content{
    max-width: calc(100% - var(--column-width));
}

.header_afbeelding {
	grid-column: 1;
	grid-row: 1;
	overflow: hidden;
	border-radius: 1rem;
	opacity: 0;
	will-change: transform, opacity;
	animation: header-image-in 900ms cubic-bezier(.22, 1, .36, 1) forwards;
}

.header_afbeelding picture,
.header_afbeelding img {
	display: block;
	width: 100%;
	height: 100%;
}

.header_afbeelding img {
	object-fit: cover;
}

.header_afbeelding_1 {
	justify-self: start;
	width: min(53.7rem, 84%);
	aspect-ratio: 536 / 716;
	z-index: 2;
	animation-delay: 220ms;
}

.header_afbeelding_2 {
	justify-self: start;
	margin-left: clamp(1rem, 1.35vw, 2.6rem);
	width: min(55.8rem, 87%);
	aspect-ratio: 600 / 762;
	transform: rotate(6deg);
	z-index: 1;
	animation-name: header-image-in-tilted;
	animation-delay: 80ms;
}

.header_afbeelding:only-child {
	width: min(56rem, 86%);
	animation-name: header-single-image-in;
}

@keyframes header-image-in {
	from {
		opacity: 0;
		transform: translate3d(5rem, 4rem, 0) scale(.98);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}

@keyframes header-single-image-in {
	from {
		opacity: 0;
		transform: translate3d(5rem, 4rem, 0) scale(.98);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}

@keyframes header-image-in-tilted {
	from {
		opacity: 0;
		transform: translate3d(5rem, 4rem, 0) rotate(10deg) scale(.98);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0) rotate(6deg) scale(1);
	}
}

@media (max-width:767px)
{
	.header {
		overflow: visible;
	}

	.header_media_col {
		margin-top: clamp(3rem, 7vw, 6rem);
	}

	.header_afbeeldingen {
		display: grid;
		justify-items: center;
		align-items: start;
	}

	.header_afbeelding {
		grid-column: 1;
		grid-row: 1;
	}

	.header_afbeelding_1 {
		margin-top: clamp(3.8rem, 9vw, 6.8rem);
		width: min(37rem, 76vw);
	}

	.header_afbeelding_2 {
		margin-left: clamp(1rem, 3vw, 2.4rem);
		width: min(38.5rem, 79vw);
		transform: rotate(6deg);
	}

	.header_afbeelding:only-child {
		width: min(42rem, 100%);
		transform: none;
		animation-name: header-image-in;
	}

	@keyframes header-image-in-tilted {
		from {
			opacity: 0;
			transform: translate3d(3rem, 3rem, 0) rotate(10deg) scale(.98);
		}

		to {
			opacity: 1;
			transform: translate3d(0, 0, 0) rotate(6deg) scale(1);
		}
	}
}

@media (min-width:768px) and (max-width:991px)
{
	.header {
		overflow: visible;
	}

	.header_media_col {
		margin-top: clamp(3rem, 7vw, 6rem);
	}

	.header_afbeeldingen {
		display: grid;
		justify-items: center;
		align-items: start;
	}

	.header_afbeelding {
		grid-column: 1;
		grid-row: 1;
	}

	.header_afbeelding_1 {
		margin-top: clamp(4.2rem, 7vw, 7rem);
		width: min(43rem, 58vw);
	}

	.header_afbeelding_2 {
		margin-left: clamp(1.2rem, 3vw, 2.8rem);
		width: min(44.8rem, 61vw);
		transform: rotate(6deg);
	}

	.header_afbeelding:only-child {
		width: min(42rem, 100%);
		transform: none;
		animation-name: header-image-in;
	}

	@keyframes header-image-in-tilted {
		from {
			opacity: 0;
			transform: translate3d(3rem, 3rem, 0) rotate(10deg) scale(.98);
		}

		to {
			opacity: 1;
			transform: translate3d(0, 0, 0) rotate(6deg) scale(1);
		}
	}
}

@media (min-width:992px) and (max-width:1199px)
{
	.header_afbeelding_1 {
		width: min(43rem, 84%);
	}

	.header_afbeelding_2 {
		width: min(43rem, 84%);
	}
}

@media (prefers-reduced-motion: reduce)
{
	.header_afbeelding {
		animation: none;
		opacity: 1;
	}

	.header_afbeelding_2 {
		transform: rotate(6deg);
	}
}
