:root{--contentGridCols:0;--contentGridRows:0;--headerGridCols:0;--headerGridRows:0;--footerGridCols:0;--footerGridRows:0;}
.dynamic-header-grid{display: grid;grid-template-columns: repeat(10, var(--headerGridCols));grid-template-rows: repeat(10, var(--headerGridRows));}
.dynamic-content-grid{overflow: hidden; display: grid;grid-template-columns: repeat(10, var(--contentGridCols));grid-template-rows: repeat(10, var(--contentGridRows));}
.dynamic-footer-grid{display: grid;grid-template-columns: repeat(10, var(--footerGridCols));grid-template-rows: repeat(10, var(--footerGridRows));}
.dynamic-header-grid-small{display: grid;grid-template-columns: repeat(10, var(--headerGridCols));grid-template-rows: repeat(10, var(--headerGridRows));}
.dynamic-content-grid-small{overflow: hidden; display: grid;grid-template-columns: repeat(10, var(--contentGridCols));grid-template-rows: repeat(10, var(--contentGridRows));}
.dynamic-footer-grid-small{display: grid;grid-template-columns: repeat(10, var(--footerGridCols));grid-template-rows: repeat(10, var(--footerGridRows));}
.dynamic-header-grid-land{display: grid;grid-template-columns: repeat(10, var(--headerGridCols));grid-template-rows: repeat(10, var(--headerGridRows));}
.dynamic-content-grid-land{overflow: hidden; display: grid;grid-template-columns: repeat(10, var(--contentGridCols));grid-template-rows: repeat(10, var(--contentGridRows));}
.dynamic-footer-grid-land{display: grid;grid-template-columns: repeat(10, var(--footerGridCols));grid-template-rows: repeat(10, var(--footerGridRows));}

/*GRID NAMED AREAS*/
.dynamic-header-grid{grid-template-areas: "lft t t t t t t t t rgt"
										  "lft t t t t t t t t rgt"
										  "lft-2 left left . mid mid . right right rgt"
										  "lft-2 left left . mid mid . right right rgt-2"
										  "lft-3 left left . mid mid . right right rgt-2"
										  "lft-3 mid-left mid-left . mid-mid mid-mid .  mid-right mid-right rgt-2"
										  "lft-4 mid-left mid-left . mid-mid mid-mid .  mid-right mid-right rgt-3"
										  "lft-4 mid-left mid-left . mid-mid mid-mid .  mid-right mid-right rgt-3"
										  "lft-5 bot-left bot-left . bot-mid bot-mid .  bot-right bot-right rgt-3"
										  "lft-5 bot-left bot-left . bot-mid bot-mid .  bot-right bot-right rgt-5"
										  ". . . . . . . . . .";}

.dynamic-content-grid{grid-template-areas:"t t t t t t t t t t"
										  "t t t t t t t t t t"
										  "a a b b c c d d e e"
										  "f f g g h h j j k k"
										  "l l m m n n o o p p"
										  ". . . . . . . . . ."
										  ". . . . . . . . . ."
										  ". . . . . . . . . ."
										  ". . . . . . . . . ."
										  ". . . . . . . . z z" ;}

.dynamic-footer-grid{grid-template-areas: ". . . . . . . . . ." 
										  ". . . m m m m . . ."
										  "l l . m m m m . r r" 
										  "l l . m m m m . r r "
										  "l l . m m m m . r r "
										  "l l . m m m m . r r "
										  "l l . m m m m . r r "
										  "l l . m m m m . r r "
										  ". . . m m m m . . ." 
										  ". . . . . . . . . ." ;}
.dynamic-header-grid-small{grid-template-areas: ". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										 		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . .";}

.dynamic-content-grid-small{grid-template-areas:". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										 		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . .";}

.dynamic-footer-grid-small{grid-template-areas: ". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										 		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . .";}

.dynamic-header-grid-land{grid-template-areas: ". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										 		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . .";}

.dynamic-content-grid-land{grid-template-areas:". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										 		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . .";}

.dynamic-footer-grid-land{grid-template-areas: ". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										 		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . ."
										  		". . . . . . . . . .";}
/*END GRID NAMED AREAS*/
/*HEADER AREA GRID CLASSES*/
.h-head{grid-area: t;}
.left{grid-area: left;}
.middle{grid-area: mid;}
.right{grid-area: right;}
.m-left{grid-area: mid-left;}
.m-middle{grid-area: mid-mid;}
.m-right{grid-area: mid-right;}
.b-left{grid-area: bot-left;}
.b-middle{grid-area: bot-mid;}
.b-right{grid-area: bot-right;}
.l-edge-1{grid-area: lft;}
.l-edge-2{grid-area: lft-2;}
.l-edge-3{grid-area: lft-3;}
.l-edge-4{grid-area: lft-4;}
.l-edge-5{grid-area: lft-5;}
.r-edge-1{grid-area: rgt;}
.r-edge-2{grid-area: rgt-2;}
.r-edge-3{grid-area: rgt-3;}
.r-edge-5{grid-area: rgt-5;}
/*--------------------------------------------second grid template------------------------------------*/
.first-sect{grid-area: a;}
.second-sect{grid-area: b;}
.third-sect{grid-area: c;}
.fourth-sect{grid-area: d;}
.six-sect{grid-area: f;}
.sev-sect{grid-area: g;}
.eight-sect{grid-area: h;}
.nine-sect{grid-area: i;}
.crud-edge{grid-area: crud;}
/*------------------------------------------end second grid-------------------------------------------*/
/*END HEADER*/
/*BODY GRID*/
.a-sect{grid-area: a;}
.b-sect{grid-area: b;}
.c-sect{grid-area: c;}
.d-sect{grid-area: d;}
.e-sect{grid-area: e;}
.f-sect{grid-area: f;}
.g-sect{grid-area: g;}
.h-sect{grid-area: h;}
.i-sect{grid-area: i;}
.j-sect{grid-area: j;}
.k-sect{grid-area: k;}
.l-sect{grid-area: l;}
.m-sect{grid-area: m;}
.n-sect{grid-area: n;}
.o-sect{grid-area: o;}
.p-sect{grid-area: p;}
.z-sect{grid-area: z;}
/*END BODY GRID*/
/*FOOTER GRID*/
.f-left{grid-area: l;}
.f-mid{grid-area: m;}
.f-right{grid-area: r;}
/*END FOOTER*/