#footer1 {
	padding: 30px var(--h-pad);
	background-color: black;
	color: #ddd;
}

footer .container {
	gap: 25px 15px;
}

#footer1 .container>* {
	flex-grow: 1;
}

#footer1 a:hover {
	color: white;
}

#footer1 nav>div {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

footer .title {
	font-size: 2em;
}

footer .title::first-letter {
	color: var(--color-primary);
}

#footer2 {
	padding: 10px 30px;
	background-color: var(--color-primary);
	color: var(--color-on-primary);
}

footer nav {
	gap: 25px;
}

footer ul a {
	display: inline;
	color: var(--color-primary);
	font-weight: bold;
}

footer .container div:last-child {
	opacity: .7;
}

@media (max-width:900px) {
	#footer1 .container {
		flex-wrap: wrap;
	}
}

@media (min-width:900px) {
	#footer1 .container>*:not(:last-child) {
		padding-right: 20px;
		border-right: 2px solid;
	}
}