main {
	display: grid;
	height: 100vh;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: 1fr auto;
	column-gap: var(--space-sm--bp-4);
	row-gap: var(--space-lg--bp-4);
}

.text {
	grid-column: 1 / span 8;
}

.text > p {
	padding-bottom: calc(var(--space-sm--bp-4) *.75);
}

.text a {
	text-decoration: underline;
	text-decoration-thickness: .075em;
	text-underline-offset: .15em;
}

.text a:hover {
	color: var(--grey);
	text-decoration-color: var(--grey);
	cursor: url(../../images/crayon-emoji.png), auto;
}

@media screen and (max-width: 1000px) {
	main {
		column-gap: var(--space-sm--bp-3);
		row-gap: var(--space-lg--bp-3);
	}

	.text {
		grid-column: 1 / span 10;
	}

	.text > p {
		padding-bottom: calc(var(--space-sm--bp-3) *.75);
	}
}

@media screen and (max-width: 700px) {
	main {
		column-gap: var(--space-sm--bp-2);
		row-gap: var(--space-lg--bp-2);
	}

	.text {
		grid-column: 1 / span 12;
	}

	.text > p {
		padding-bottom: calc(var(--space-sm--bp-2) *.75);
	}
}

@media screen and (max-width: 400px) {
	main {
		column-gap: var(--space-sm--bp-1);
		row-gap: var(--space-lg--bp-1);
	}

	.text > p {
		padding-bottom: calc(var(--space-sm--bp-1) *.75);
	}
}