#gridContainer{width:100%;max-width:1460px;height:auto;margin:60px auto 10px auto;display:grid;grid-row-gap:25px;grid-template-rows:34px auto auto auto;grid-template-columns:[col-start] auto [col-2] 10% [col-3] 40% [col-4] 40% [col-end] auto;grid-template-areas:"SPACET SPACET SPACET SPACET SPACET" "SPACEL HEADER HEADER HEADER SPACER" "SPACEL DOTTED MAINCO MAINCO SPACER" "FOOTER FOOTER FOOTER FOOTER FOOTER"}

@media screen and (max-width:640px){#gridContainer{width:100%;height:auto;margin:0;display:grid;grid-row-gap:25px;grid-template-rows:80px auto auto auto;grid-template-columns:[col-start] auto [col-2] 90%;grid-template-areas:"SPACET SPACET" "HEADER HEADER" "DOTTED MAINCO" "FOOTER FOOTER"}.SPACEL,.SPACER{display:none}}

.SPACET{grid-area:SPACET}.SPACEL{grid-area:SPACEL}.SPACER{grid-area:SPACER}.HEADER{grid-area:HEADER}.MAINCO{grid-area:MAINCO}.FOOTER{grid-area:FOOTER}.DOTTED{grid-area:DOTTED}@media screen and (max-width:640px){.HEADER{grid-area:HEADER;padding:0 0 0 8px}.DOTTED{grid-area:DOTTED;padding:0 0 0 8px}.MAINCO{grid-area:MAINCO;padding:0 10px 0 0}}