html {
	height: 100%;
	width: 100%;
}

body {
	height: 100%;
	display: grid;
	gap: 2.5rem; /* fr-5w */
	grid-template-areas:
		"header"
		"photo"
		"main"
		"footer";
	grid-template-rows: max-content 33vh 1fr min-content;
	grid-template-columns: 1fr;
}

@media (min-width: 48em) {
	body {
		grid-template-areas:
			"photo header"
			"photo main"
			"photo footer";
		grid-template-rows: max-content 1fr min-content;
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 48em) {
	body > *:not(aside) {
		padding-left: 5vw;
		padding-right: 5vw;
	}
}

aside {
	grid-area: photo;
	background: url("bernard.jpg");
	background-position: center 33%;
	background-repeat: no-repeat;
	background-size: cover;
}

@media (min-width: 48em) {
	aside {
		background-position: center;
	}
}

header {
	grid-area: header;
}

p,
li {
	max-width: 40ch;
}

main {
	grid-area: main;
}