h1 {
	margin: 0;
	font-size: 1.5rem;
	color: rgb(var(--color-white));
}

main {
	margin: 1rem auto 10rem;
	padding: 0 1rem;
}

@media(min-width: 30em) {
	main {
		display: grid;
		grid-template-areas:
			"photo intro"
			"main main"
			"contact contact";
		grid-template-columns: clamp(10em, 25vw, 20em) 1fr;
		column-gap: 2rem;
	}
}

@media(min-width: 60em) {
	main {
		display: grid;
		grid-template-areas:
			"photo intro s"
			"photo main s"
			"contact main s";
		grid-template-rows: auto auto 1fr;
		grid-template-columns: 20em clamp(10em, 60vw, 37em) 1fr;
		max-width: var(--layout-wide);
	}
}

.intro {
	background: rgb(var(--color-purple));
	color: rgb(var(--color-white));
	position: relative;
	z-index: 10;
	grid-area: intro;
	padding: 1rem 0;
	margin: 2rem 0;
	align-self: start;
	text-transform: uppercase;
}

.intro::before {
	position: absolute;
	content: ' ';
	background-color: rgb(var(--color-purple));
	top: 0;
	bottom: 0;
	right: calc(50% - 50vw);
	left: -4rem;
	display: block;
	z-index: -1;
}

.intro-position-title {
	font-size: 0.9em;
}

.portrait {
	position: relative;
	grid-area: photo;
}

.portrait img {
	width: 100%;
	display: block;
}

@media(min-width: 60em) {
	.portrait::after {
		position: absolute;
		content: ' ';
		background-color: rgb(var(--color-purple));
		bottom: 0;
		right: 0;
		width: 45%;
		height: 16%;
		display: block;
	}
}

.content-main {
	grid-area: main;
	margin: 1rem 0;
}

.contact-details {
	position: relative;
	background: rgb(var(--color-dkgray));
	color: rgb(var(--color-white));
	padding: 6rem 1rem 1rem;
	grid-area: contact;
	align-content: end;
}

.contact-details::after {
	position: absolute;
	content: ' ';
	background-color: rgb(var(--color-magenta));
	top: 0;
	right: 0;
	width: 45%;
	height: 6em;
	display: block;
}

.contact-details a {
	color: inherit;
}

@media(min-width:60em) {
	footer::after {
		content: ' ';
		position: absolute;
		background: url(../img/footer-triangle-solid.png) no-repeat;
		pointer-events: none;
		height: 330px;
		width: 330px;
		right: calc(50% - 50vw);
		bottom: calc(100% - 28px);
		z-index: -1;
	}
}