@use "../abstracts/functions" as *;

body > main,
body > nav,
body > footer {
	--padding: 1rem;
	margin-inline: auto;
	padding-inline: 1rem;
	max-width: calc(var(--content-width) + var(--padding) * 2);
}

body > footer {
	margin-block-start: 4rem;
}

body > nav {
	margin-block-end: 4rem;
	border-block-end: rpx(1) solid var(--bg-muted-2);

	ul {
		display: flex;
		gap: 0.25rem;
		margin-block: 0.625rem;
		padding-inline-start: 0;
		list-style: none;

		@media only screen and (max-width: 480px) {
			flex-direction: column;
		}
	}

	li {
		margin-block: 0;
		padding-inline-start: 0;
	}
}