/*03_grid.css*/

#header_left_div  	{ grid-area:header_left;}
#header_nav_div		{ grid-area:header_nav;}
header 				{ grid-area:header;}
#header_right_div  	{ grid-area:header_right;}

#layout_left_div  	{ grid-area:layout_left;}
#layout_div       	{ grid-area:layout;}
#layout_right_div 	{ grid-area:layout_right;}

nav#nav_nav 		{ grid-area:nav_nav;}

#main_wrapper 		{ grid-area:main_wrapper;}
#main_main 			{ grid-area:main_main;}
#main_footer 		{ grid-area:main_footer;}

#footer_left_div  	{ grid-area:footer_left;}
#footer_nav_div  	{ grid-area:footer_nav;}
#footer_footer 		{ grid-area:footer;}
#footer_right_div  	{ grid-area:footer_right;}


/* Desktop */

#body_wrapper_div{
	margin:0;
	min-height:100dvh;
	display:grid;

	grid-template-columns:
		minmax(0,1fr)
		var(--03_grid_nav_width)
		minmax(0,var(--03_grid_main_max_width))
		minmax(0,1fr);

	grid-template-rows:
		auto
		1fr
		auto;

	grid-template-areas:
		"header_left header_nav header header_right"
		"layout layout layout layout"
		"footer_left footer_nav footer footer_right";
}


#layout_div{
	margin:0;
	display:grid;

	grid-template-columns:
		minmax(0,1fr)
		var(--03_grid_nav_width)
		minmax(0,var(--03_grid_main_max_width))
		minmax(0,1fr);

	grid-template-rows:
		auto;

	grid-template-areas:
		"layout_left nav_nav main_wrapper layout_right";
}


#header_left_div,
#header_nav_div,
header,
#header_right_div{
	height:var(--04_header_banner_height);
	position:sticky;
	top:0;
	z-index:1000;	
}


#banner_navigation_wrapper{
	grid-column:2 / 4;
	grid-row:1;

	display:grid;

	grid-template-columns:
		var(--03_grid_nav_width)
		minmax(0,var(--03_grid_main_max_width));

	grid-template-areas:
		"header_nav header";

	min-width:0;
}


header{
	min-width:0;
}


/* Tablet */

@media (min-width:769px) and (max-width:1199px){

	#body_wrapper_div{
		width:100%;
		min-width:0;
		margin:0;

		grid-template-columns:
			var(--03_grid_nav_width_1199)
			minmax(0,1fr);

		grid-template-rows:
			auto
			1fr
			auto
			auto;

		grid-template-areas:none;
	}


	#banner_navigation_wrapper{
		grid-column:1 / -1;
		grid-row:1;

		width:100%;
		min-width:0;

		grid-template-columns:
			minmax(0,1fr);

		grid-template-areas:
			"header";
	}


	header{
		grid-column:1 / -1;
		min-width:0;
	}


	#layout_div{
		grid-column:1 / -1;
		grid-row:2;

		width:100%;
		min-width:0;
		margin:0;

		grid-template-columns:
			var(--03_grid_nav_width_1199)
			minmax(0,1fr);

		grid-template-areas:
			"nav_nav main_wrapper";
	}


	nav#nav_nav,
	#main_wrapper,
	#main_main{
		min-width:0;
	}


	#footer_footer{
		grid-column:1 / -1;
		grid-row:3;
	
		width:100%;
		min-width:0;
		box-sizing:border-box;
	}


	#header_left_div,
	#header_right_div,
	#layout_left_div,
	#layout_right_div,
	#footer_left_div,
	#footer_right_div{
		display:none;
	}
}


/* Handy */

@media (max-width:768px){

	#body_wrapper_div{
		width:100%;
		min-width:0;
		margin:0;

		grid-template-columns:
			minmax(0,1fr);

		grid-template-areas:none;
	}


	#banner_navigation_wrapper{
		grid-column:1 / -1;
		grid-row:1;

		width:100%;
		min-width:0;

		grid-template-columns:
			minmax(0,1fr);

		grid-template-areas:
			"header";
	}


	header{
		grid-column:1 / -1;
		min-width:0;
	}
}