.navigation-footer {
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: var(--primary-color-900);
}

.navigation-footer .item {
	display: inline-block;
}

@media (min-width: 64em) {
	.navigation-footer {
		/* column-width: 160px; */
		position: absolute;
		left: 0;
		top: 0;
		border-top-right-radius: var(--rounded-3xl);
		border-bottom-right-radius: var(--rounded-3xl);
		padding-right: 18px;
		display: flex;
	}
	.navigation-footer::before {
		/* make the footer nav extend to at least the edge of the viewport */
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: -50vh;
		width: 50vh;
		background-color: var(--primary-color-900);
	}
}

.navigation-footer a {
	display: block;
	padding: var(--space-2) var(--space-3);
	color: inherit;
}

.navigation-footer a:hover {
	color: inherit;
	text-decoration: underline;
}