/* **************************
	Holy Grail Layout with CSS Grid
************************** */

/* Define grid areas */
.hg-marquee { grid-area: marquee; }
.hg-header { grid-area: header; }
.hg-baner { grid-area: baner; }
.hg-full { grid-area: full; }
.hg-header-menu { grid-area: header-menu; }
.hg-mobile-menu { grid-area: mobile-menu; }
.hg-footer { grid-area: footer; }
.hg-main { grid-area: main; }
.hg-left { grid-area: navigation; }
.hg-right { grid-area: ads; }
.hg-bottom { grid-area: bottom; }


.hg {
	display: grid;
	grid-template-areas: "marquee marquee marquee"
                         "header baner full"
                         "header-menu header-menu header-menu"
	                     "navigation main ads"
	                     "footer footer footer"
                         "bottom bottom bottom";

	grid-template-columns: 1fr 3fr  1fr;

	grid-template-rows: 40px
                        250px 
                        120px
						auto 
						150px
                        120px;

	
}


@media screen and (max-width: 900px) {
    
.hg {
	display: grid;
	grid-template-areas: "marquee marquee"
                         "header baner"
                         "header-menu header-menu"
	                     "navigation main"
                         "ads ads"
	                     "footer footer"
                         "bottom bottom";
                         
                         

	grid-template-columns:  1fr  2fr;

		grid-template-rows: 40px 
                            250px 
							auto
							auto
							auto
							150px
                            120px;
                            

	
}
}


@media screen and (max-width: 600px) {
    
    .hg {
	display: grid;
		grid-template-areas: 
                             "mobile-menu"
                             "header"
		                     "main"
							 "navigation"
                             "ads"
		                     "footer"
                             "bottom";

		grid-template-columns: 100%;
		grid-template-rows: 80px 
                            250px 
							auto
							auto
							auto
							150px
                            120px;
      
	}
}