body[layout='layout-home'],
body[layout='layout-sidebar']{
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 40px 40px 150px minmax(350px, 1fr) auto;
  grid-template-areas:
    "content-side  head-main"
    "content-side  head2-main"
    "content-side  head3-main"
    "content-side  content2-main"
    "content-side  foot-main";
  grid-auto-rows: 0; 
  grid-auto-columns: 0;
  overflow-x: hidden;
}
.sidebar-grid-area {
  grid-area: content-side;
}

.ga-head-main {
  grid-area: head-main;
}

.header-grid-area {
  grid-area: head2-main;
}

.ga-head3-main {
  grid-area: head3-main;
}

.content-grid-area {
  grid-area: content2-main;
}

.ga-foot-main {
  grid-area: foot-main;
}
@media (max-width: 1024px) {
  body[layout='layout-home'],
  body[layout='layout-sidebar'] {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 56px minmax(350px, 1fr) auto;
    grid-template-areas:
      "head2-main"
      "content2-main"
      "foot-main";
    /* next 4 lines prevents stray grid items from being written WTF???????? */
    grid-auto-rows: 0; 
    grid-auto-columns: 0;
    overflow-x: hidden;
  }
}