.footer {
	margin-top: 5rem;
	padding: 3rem 1rem 8rem;
	background-color: var(--primary);
}

@media(max-height: 568px) {
	.footer {
		padding: 1rem 1rem 6rem;
	}
}

@media(min-height: 812px) {
	.footer {
		padding: 3rem 1rem 11rem;
	}
}

.footer ul {
	padding: 0;
	list-style: none;
}

.footer-navigation {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 1rem;
	padding-top: 2rem;
}

@media(min-width: 37.5em) {
	.footer-navigation {
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 3rem;
	}
}

@media(min-height: 812px) {
	.footer-navigation {
		padding-top: 3rem;
	}
}

.navigation-header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 0 0.5rem;
}

.navigation-header a,
.navigation-header a:hover {
	border: none !important;
}

.footer-navigation ul {
	margin-bottom: 2rem;
}

@media(max-height: 568px) {
	.footer-navigation ul {
		margin-bottom: 1rem;
	}
}

@media(max-width: 667px) {
	.footer-navigation ul {
		margin-bottom: 1rem;
	}
}

.footer a {
	display: block;
	padding: 0.5rem;
	color: var(--white);
	border-bottom: thin solid rgba(255,255,255,0.15);
}

.footer-navigation li a:hover {
	background-color: rgba(255,255,255,0.2);
	border-bottom: thin dashed var(--primary);
}

.footer-navigation li a:focus {
	border-bottom: thin solid var(--primary);
}

.contact-info {
	display: block;
	padding: 0.5rem;
	color: var(--white);
}

.contact-info span {
	display: block;
	padding: 0.125rem 0;
}

.contact-info a {
	display: inline;
	padding: 0;
}

.icon-close {
	display: block;
	align-self: center;
	justify-self: end;
}

.footer .icon-close svg {
	fill: var(--accent);
}

.logomark {
	max-width: 4rem;
}