header {
	nav {
		grid-area: nav;
		display: grid;
		grid-template-columns: subgrid;
		grid-template-areas: "back . . . name";

		font-family: var(--font-heading);
		font-size: 1.5rem;

		span.back {
			grid-area: back;

			a {
				color: var(--text-color);
			}
		}

		span.name {
			grid-area: name;
		}
	}
}

@media (max-width: 450px) {
	header {
		nav {
			grid-template-columns: 1fr;
			grid-template-rows: auto;
			row-gap: 0.25rem;
			grid-template-areas:
				"back"
				"name";

			span.back {
				font-family: var(--font-code);
				text-transform: uppercase;
				font-size: 1rem;
				opacity: 65%;
			}
		}
	}
}