/*	layout.css
	================================================
	header
		p#banner
	nav
	main
		article
		aside#first-aside
		aside#second-aside
	footer
	================================================ */

/*	Variables
	================================================ */

	html {
		--max-width: 1024px;
	}

/*	Core: Small
	================================================ */

	header, nav, main, footer, article, aside, body, div {
		box-sizing: border-box;
	}
	html,body {
		margin: 0;
		padding: 0;
		max-width: var(--max-width);
	}
	html {
		margin: 0 auto;
	}

/*	Sticky Footer
	================================================ */

	body {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}
	main {
		flex: 1;
		justify-content: space-between;
	}

	header {

	}
	nav {

	}
	main {

	}
	footer {

	}

/*	Sticky Nav
	================================================ */

	nav {
		top: 0;
		qwidth: 100%;
		position: sticky;
	}

/*	Responsive: Tablet
	================================================ */

	@media(min-width: 740px) {


		/*	Centered
		================================================ */

		main {
			display: grid;
			grid-template-columns: 3fr 2fr;
		}
		article {
			grid-row: 1/3;
		}
	}

/*	Responsive: Desktop
	================================================ */

	@media(min-width: 1024px) {
		main {
			display: grid;
			grid-template-columns: 1fr 2fr 1fr;
		}
		nav {
			width: inherit;
		}

		article, aside {
			grid-row: 1/3;
		}
		article {
			grid-column: 2/3;
		}
		aside#first-aside {
			grid-column: 3/4;
		}
		aside#second-aside {
			grid-column: 1/2;
		}
	}