:root {
	--basegrid: "header header header" ". nav ." ". side ." ". content ." "footer footer footer";
	--basegrid-cols: auto min(var(--body-width, 100%), 100%) auto;
	--basegrid-rows: max-content max-content max-content 1fr max-content;
}

body:not(:has(#__nuxt, #__next)), :where(#__nuxt, #__next) {
	display: grid;
	min-height: -webkit-fill-available;
    min-height: -moz-available;
	padding: 0;
	width: calc(100% - 2rem);
	grid-template-columns: var(--basegrid-cols);
	grid-template-rows: var(--basegrid-rows);
	grid-template-areas: var(--basegrid);

	> header {
		grid-area: header;
		grid-template-columns: subgrid;
	}

	> nav {
		grid-area: nav;
		height: 100%;
	}

	> main {
		grid-area: content;
	}

	> footer {
		grid-area: footer;
		grid-template-columns: subgrid;
	}

	> aside {
		grid-area: side;
	}
}

@media (min-width: 85rem) {
	:root {
		--basegrid: "header header header header" ". nav side ." ". content side ." "footer footer footer footer";
		--basegrid-cols: 1fr var(--body-width, 100%) 0 1fr;
		--basegrid-rows: max-content max-content 1fr max-content;
	}

	[data-nav] {
		grid-area: side;
		min-width: 20ch;
		padding-inline-start: 1rem;

		& > ul > li {
			width: 100%;
			margin-bottom: 1rem;
		}
	}
}