/*Hero banner styling*/
/*********************/
section:nth-of-type(1) { background: var(--color-blush); }

/*hero banner layout*/
section:nth-of-type(1) > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr);
	align-items: center;
	gap: var(--space-80);
	padding-block: var(--space-64) var(--space-96);
}

section:nth-of-type(1) > div > * { min-width: 0; }

section:nth-of-type(1) article { 
	display: grid; 
	gap: var(--space-28); 
}

section:nth-of-type(1) article p:first-of-type {
	color: #684b53;
	font-size: var(--font-size-tiny);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 1.68px;
}

section:nth-of-type(1) article h1 { 
	max-width: 35em;
	font-size: clamp(2rem, 5vw, 3rem); 
}

section:nth-of-type(1) article .lead { max-width: 35em; }

/*Button and invitation*/
section:nth-of-type(1) article div {
	display: grid;
	justify-items: start;
	gap: var(--space-12);
	padding-top: var(--space-12);
}

section:nth-of-type(1) article div p {
	color: var(--color-muted);
	font-size: var(--font-size-tiny);
	font-weight: var(--font-weight-semibold);
}

/*Image*/
.image-mask--hero {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	background-image: url("../images/homepage_header_image.jpg");
}




/*Styling for diensten segment*/
/******************************/
section:nth-of-type(2) {
	 background: var(--color-background); 
	}

section:nth-of-type(2) > .container { 
	padding-block: var(--space-96); 
}

section:nth-of-type(2) > .container > .section-introduction { 
	max-width: 50%; 
	margin-bottom: var(--space-40); 
}

section:nth-of-type(2) > .container > .section-introduction h2 { 
	max-width: 100%; 
	margin-bottom: var(--space-20); 
}

/*The offering cards*/
section:nth-of-type(2) .offering-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.88fr) minmax(0, 1fr);
	gap: var(--space-24);
}

section:nth-of-type(2) .offering-grid > * { min-width: 0; }

section:nth-of-type(2) article {
	background: var(--color-card);
	border-radius: var(--radius-24);
	overflow: hidden;
}

section:nth-of-type(2) .offering-card__text { 
	display: grid; 
	gap: var(--space-12); 
	min-width: 0; 
}

section:nth-of-type(2) article h3 { 
	font-size: var(--font-size-xxlarge); 
}

section:nth-of-type(2) article p { 
	font-size: var(--font-size-standard); 
	overflow-wrap: anywhere; 
}

section:nth-of-type(2) .button--small {
	align-self: start;
	min-height: 0;
	padding: var(--space-8) var(--space-16);
	font-size: var(--font-size-small);
	max-width: max-content;
	padding-block: var(--space-12);
}

/*large offering card*/
section:nth-of-type(2) .offering-card--large { 
	padding: var(--space-24); 
}

section:nth-of-type(2) .offering-card--large .image-mask { 
	width: 100%; 
	height: auto;
	aspect-ratio: 2.02;
	background-image: url("../images/mindfulness_banner.jpg");
}

section:nth-of-type(2) .offering-card--large .offering-card__text { 
	margin-top: var(--space-24); 
}

/*Smaller offering cards*/
section:nth-of-type(2) .offering-grid > div { display: grid; gap: var(--space-24); }

.offering-card--horizontal {
	display: flex;
	align-items: center;
	gap: var(--space-24);
	padding: var(--space-24);
}

.offering-card--horizontal .image-mask { 
	flex: 0 0 25.6%;
	height: auto;
	aspect-ratio: 0.85;
}

section:nth-of-type(2) .offering-card--horizontal:first-child .image-mask {
	background-image: url("../images/natuursessie_banner.jpg");
}





/*About Section*/
/***************/
section:nth-of-type(3) { background: var(--color-card); }
section:nth-of-type(3) > .container {
	display: grid;
	grid-template-columns: minmax(0, 1.574fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--space-96);
	padding-block: var(--space-80);
}

section:nth-of-type(3) > .container > div:first-child { 
	display: grid;
	gap: var(--space-24); 
}

section:nth-of-type(3) > .container p { 
	max-width: 100%; 
}

.image-mask--portrait { 
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	background-image: url("../images/christel_burger.jpg");
}




/*Styling for different page sizes*/
/**********************************/
@media (max-width: 72em) {
	section:nth-of-type(1) > div { 
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); 
		gap: var(--space-40); 
	}

	.image-mask--hero { 
		width: 100%;
		height: auto;
	}

	section:nth-of-type(2) .offering-grid { 
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); 
	}

	section:nth-of-type(3) > .container { 
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.53fr); 
		gap: var(--space-40); 
	}
	.image-mask--portrait { 
		width: 100%;
		height: auto;
	}
}

@media (max-width: 64em) {
	section:nth-of-type(2) .offering-grid {
		grid-template-columns: 1fr;
	}

	section:nth-of-type(2) .offering-grid > div {
		gap: var(--space-16);
	}
}

@media (max-width: 48em) {
	section:nth-of-type(1) > div,
	section:nth-of-type(3) > .container { 
		grid-template-columns: 1fr; 
	}

	section:nth-of-type(1) > div { 
		gap: var(--space-40); 
	}

	.image-mask--hero { 
		width: 100%; height: auto; margin-left: 0; 
	}

	section:nth-of-type(2) > .container > .section-introduction { 
		max-width: 100%; 
	}

	section:nth-of-type(3) > .container { 
		padding-inline: 0; 
	}

	.image-mask--portrait { 
		width: 100%;
		height: auto;
	}
}

@media (max-width: 30em) {
	.offering-card--horizontal { 
		align-items: flex-start; 
		flex-direction: column; 
	}
	.offering-card--horizontal .image-mask { 
		width: 100%; 
		height: auto;
		aspect-ratio: 3.125;
	}
}