/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Header
# Footer
# Navigation
# Main Layout
--------------------------------------------------------------*/

@import "partials/_header.css";
@import "partials/_footer.css";
@import "partials/_navigation.css";
@import "partials/_sidebar.css";
@import "extras/_blocks.css";

/*--------------------------------------------------------------
# Main Layout
--------------------------------------------------------------*/
.site {
	margin: 0 auto;
	max-width: 100%;
}

@media (--md) {

	[class*="has-sidebar-"] .site {
		display: grid;
		grid-template-columns: repeat(6, 1fr);

		/* Preventing a CSS Grid items to blowout when inner content is wider */
		& > * {
			max-width: 100%;
		}
	}

	.has-sidebar-left .site {
		grid-template-areas:
			"head head head head head head"
			"side main main main main main"
			"side foot foot foot foot foot";	
	}

	.has-sidebar-right .site {
		grid-template-areas:
			"head head head head head head"
			"main main main main main side"
			"side foot foot foot foot foot";	
	}
	
	/* CSS Grid items */
	.site-header {
		grid-area: head;
	}

	.site-main {
		grid-area: main;
	}

	.site-sidebar {
		grid-area: side;	
	}

	.site-footer {
		grid-area: foot;
	}
}

main {
	@media (--md) {
		min-height: 650px;
	}
}