#footer {
	position: absolute;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(5lh, auto));
	text-align: center;
	padding-top: var(--footer-padding);
	padding-bottom: var(--footer-padding);
	isolation: isolate;
	bottom: 0;
	width: 100%;
	color: var(--kit-white);

	a:visited {
		color: unset;
		text-decoration: unset;
	}
	&::before {
		z-index: -1;
		content: "";
		position: absolute;
		left: 0;
		transform: translateX(
			calc(-1 * (1px + var(--main-margin-inline) + var(--main-padding)))
		);
		top: 0;
		height: 100%;
		width: 100vw;
		background-color: color-mix(var(--kit-green), black 25%);
		@media screen and (max-width: 650px) {
			transform: translateX(calc(-1 * (1em + var(--main-padding))));
		}
	}
}