@media (min-width: 768px) and (aspect-ratio > 1/1) {
	body[data-domain*="zwarte"] div:has( > .jumbo) {
		min-height: calc(100vh - 150px);
	
	}
}
div:has( > .jumbo) {	
	display: grid;
	grid-template-columns: 1fr;
	
		background-color:var(--color_darker); 
	position: relative;
}

body[data-domain*="svh"] {
	--color_text:#fff;
}
.zp-home-intro h1 + h2 {
	margin-top: 15px;
	margin-bottom: 25px;
}

@media (min-width: 768px) and (aspect-ratio < 1/1) {
	div:has( > .jumbo) + *  {	
		margin-top: -100px;
	}
}

@media only screen and (min-height: 1100px) {

	div:has( > .jumbo) {
		
	}
}

div:has( > .jumbo) > img,
.zp-home-intro video {  
	position: absolute;
	left: 0px;
	right: 0px;
	bottom:1px;
	top: 0px;
	filter: opacity(0.6);
	pointer-events: none;

	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	
	 z-index: 0;
	transition:0.5s ease all;
}

body:not(.stop-transitions) .zp-home-intro *:is(video, .jumbo) {
	transition: 3.2s ease all;
}


body:has(footer:hover) .jumbo,
body:has(footer:hover) .toast {
	filter: opacity(0);
	pointer-events: none;
}
body:has(footer:hover) div:has( > .jumbo) > img {
	filter: opacity(0.8);
}
/*div:has( > .jumbo:hover) > img,
body.is-touch-device div:has( > .jumbo) > img { 
	filter: opacity(0.1);
}*/
div .jumbo  *:is(h1, h2, p) {
	transition:0.5s ease all;
}
body:not(.is-touch-device)  div .jumbo:not(:hover) *:is(h1, h2, p) {
	
}
.zp-home-intro::before {
	position: absolute;
	content:  '';
	top: 0px;
	left: 0px;
	right: 0px; 
	bottom: 0px;
	
	--color_darkest:#22234c;
	background:
	radial-gradient(
		circle at 40% 120%,
		color-mix(in srgb, var(--color_darkest) 50%, transparent) 30%,
		color-mix(in srgb, var(--color_darkest) 0%, transparent) 70%
	),
	radial-gradient(
		circle at 50% 75%,
		color-mix(in srgb, var(--color_darkest) 50%, transparent) 30%,
		color-mix(in srgb, var(--color_darkest) 0%, transparent) 70%
	);
	z-index: +1;
	pointer-events: none;
	
}

.jumbo {
	
	padding: 30px;
	padding-top: 120px;
	padding-bottom: 0px;
	width: 100%;
	max-width: 100vw;
	
	text-shadow: 0px 1px 1px color-mix(in srgb, var(--color_darkest) 70%, transparent) ;
}

@media only screen and (min-width: 720px) {
	.jumbo {
		
		padding: 10vw;
		padding-bottom: 0px;
		margin: auto;
		width: 90vw;
	}
	.jumbo h1 {
		white-space: nowrap;
	}
}

@media only screen and (min-width: 1100px) {
	.jumbo {
		padding-top: 2vw;
		padding-bottom: 2vw;
		max-width: calc(640px + 20vw);
	}
}


svg.lqd-custom-shape {
	margin-top: auto;
	margin-bottom: 0px;

	/*position: absolute;
	left: 0px;
	bottom: 0px;
	right: 0px;
	transform: translateY(16px);
	z-index: 2;
	*/
	display: block;
	width: 100%;
	height: 300px;
	
	pointer-events: none;
}


@media screen and (min-aspect-ratio: 3.7/2) and (max-height: 900px)  {

	svg.lqd-custom-shape { 
		margin-top: -100px;
		margin-bottom: 0px;
	}
}

svg.lqd-custom-shape path {
	fill:var(--color_darkest); 
}

.zp-item {
	display: flex;
	flex-direction: column;
	gap:8px;
}