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

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

section:nth-of-type(1) aside p { 
	font-size: var(--font-size-standard);
}

.image-mask--about { 
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	background-image: url("../images/christel_about_page.jpg");
	background-size: cover;
	background-position: center;
}

section:nth-of-type(1) h1 { 
	margin-bottom: var(--space-28); 
}

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




/*Story and background section*/
/******************************/
section:nth-of-type(2) { 
	background: var(--color-background); 
}

section:nth-of-type(2) > div {
	display: grid;
	gap: var(--space-32);
	width: min(800px, calc(100% - 40px));
	margin-inline: auto;
	padding-block: var(--space-80);
}

section:nth-of-type(2) > div h2 { 
	font-weight: var(--font-weight-semibold); 
}

section:nth-of-type(2) > div p { 
	color: var(--color-secondary); 
	padding-block: var(--space-16);
	font-size: var(--font-size-large);
}


@media (max-width: 42em) {
	section:nth-of-type(1) > div { 
		grid-template-columns: minmax(0, 1fr); 
		gap: var(--space-40); 
	}

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