main {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: 100vh auto auto;
	grid-template-areas:
		"about"
		"features"
		"footer";
}

#about {
	grid-area: about;
	text-align: center;
}

#about .feather-logo {
	border-radius: 100%;
	background-color: var(--bg-color-dull);
	max-width: 25rem;
	max-height: 25rem;
	padding: var(--spacing-5);
	margin: 0 auto var(--spacing-4) auto;
}

#about .about-content {
  align-items: center;
  justify-content: center;
}

#features {
	grid-area: features;
	background-color: var(--bg-color-dull);
	text-align: center;
}

#features .card {
	padding: var(--spacing-big);
	background-color: white;
	border-bottom: solid calc(var(--border-size-normal) * 2) transparent;
}

#features .card:hover {
	border-bottom: solid calc(var(--border-size-normal) * 2) var(--accent-color-primary);
}

#features .card h4 {
	margin-bottom: var(--spacing-3);
}

footer {
	grid-area: footer;
	background-color: var(--bg-color-dark);
}

footer .icons img {
	width: 2rem;
	margin: calc(var(--spacing-1) / 2) var(--spacing-1) 0 0;
}

footer .logo {
	max-width: 20rem;
	filter: grayscale(1.0) brightness(3.0);
}

footer .logo:hover {
	filter: none;
	transition: all 0.3s ease 0s
}

@media only screen and (max-width: 800px) {
	main {
		grid-template-rows: auto auto auto auto;
	}

	#about button {
		width: 100%;
		margin-top: calc(var(--spacing-1) / 2);
		margin-bottom: calc(var(--spacing-1) / 2);
	}

	#about p { padding: var(--spacing-2) 0; }

	#features .card { padding: var(--spacing-5); }
}