body[layout="layout-home"] {
  display: grid;
  grid-template-columns: 1fr minmax(800px, 1500px) 1fr;
  grid-template-rows: 70px minmax(350px, auto) 70px minmax(300px, auto) 70px minmax(
      300px,
      auto
    ) auto;
  grid-template-areas:
    "head-l       head-main       head-r"
    "content-l    content-main    content-r"
    "content2-l   content2-main   content2-r"
    "content3-l   content3-main   content3-r"
    "content4-l   content4-main   content4-r"
    "content5-l   content5-main   content5-r"
    "foot-l       foot-main       foot-r";
  grid-auto-rows: 0;
  grid-auto-columns: 0;
  overflow-x: hidden;
}

body[layout='layout-sidebar'],
body[layout='layout-index'],
body[layout='layout-blog-details'],
body[layout='layout-blog-overview']  {
  grid-auto-rows: 0;
  grid-auto-columns: 0;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: 1fr 300px minmax(665px, 830px) 1fr;
  grid-template-rows: 81px minmax(350px, auto) 100px;
  grid-template-areas:
    "content-l  head-main     head-main     content-r"
    "content-l  content-side  content5-main  content-r"
    "content-l  foot-main     foot-main     content-r";
  /* next lines prevent implicit grid items from showing - more experimentation may be needed? */
  grid-auto-rows: min-content;
  grid-auto-columns: min-content;
  overflow-x: hidden;
  overflow-y: scroll;
}
.content-grid-area {
  grid-area: content5-main;
}

.ga-head-l {
  grid-area: head-l;
}
.header-grid-area {
  grid-area: head-main;
}
.ga-head-r {
  grid-area: head-r;
}

.ga-content-l {
  grid-area: content-l;
}
.ga-content-main {
  grid-area: content-main;
}
.ga-content-r {
  grid-area: content-r;
}
.sidebar-grid-area {
  grid-area: content-side;
}

.ga-content2-l {
  grid-area: content2-l;
}
.ga-content2-main {
  grid-area: content2-main;
}
.ga-content2-r {
  grid-area: content2-r;
}

.ga-content3-l {
  grid-area: content3-l;
}
.ga-content3-main {
  grid-area: content3-main;
}
.ga-content3-r {
  grid-area: content3-r;
}

.ga-content4-l {
  grid-area: content4-l;
}
.ga-content4-main {
  grid-area: content4-main;
}
.ga-content4-r {
  grid-area: content4-r;
}

.ga-content5-l {
  grid-area: content5-l;
}
.ga-content5-main {
  grid-area: content5-main;
}
.ga-content5-r {
  grid-area: content5-r;
}

.ga-foot-l {
  grid-area: foot-l;
}
.ga-foot-main {
  grid-area: foot-main;
}
.ga-foot-r {
  grid-area: foot-r;
}

@media (max-width: 1024px) {
  body[layout='layout-home'],
  body[layout='layout-sidebar'],
  body[layout='layout-index'],
  body[layout='layout-blog-details'],
  body[layout='layout-blog-overview'] {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 56px minmax(350px, auto) auto;
    grid-template-areas:
      "head-main"
      "content5-main"
      "foot-main";
    /* next lines prevent implicit grid items from showing - more experimentation may be needed? */
    grid-auto-rows: min-content;
    grid-auto-columns: min-content;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .ga-content-main,
  .ga-content2-main,
  .ga-content3-main,
  .ga-content4-main {
    display: none;
  }
}