main {
  display: grid;
  grid-template-rows: 25vh repeat(7, auto) auto;
  grid-template-columns: 10% 20% 20% 20% 10%;
  grid-template-areas:
    "header header header header header"
    ". breadcrumb breadcrumb breadcrumb ."
    ". meta meta meta ."
    ". title title title ."
    ". main main main ."
    ". quote quote quote ."
    ". see-also see-also see-also ."
    ". tags tags tags ."
    ". sticky sticky sticky ."
    "footer footer footer footer footer";
  gap: 60px 5%;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header { grid-area: header; }
.breadcrumb { grid-area: breadcrumb; }
.meta { grid-area: meta; }
.title { grid-area: title; }
.main-content { grid-area: main; }
.quote { grid-area: quote; }
.see-also { grid-area: see-also; }
.tags { grid-area: tags; }
.sticky-button { grid-area: sticky; }
footer { grid-area: footer; }
@media screen and (max-width: 600px) {
  main {
    display: grid;
    grid-template-rows: 15vh repeat(8, auto) auto;
    grid-template-columns: 5% 90% 5%;
    grid-template-areas:
      "header header header"
      ". breadcrumb ."
      ". meta ."
      ". title ."
      ". main ."
      ". quote ."
      ". see-also ."
      ". tags ."
      ". sticky ."
      "footer footer footer";
    gap: 20px 0;
  }
}