.layout-container {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
}
@media (max-width: 550px) {
  .layout-container {
    display: block;
  }
}

/* BEGIN Header */

.layout-container > header {
  grid-area: header;
  background-color: rgba(0, 150, 217, 1);
  background-color: var(--discomke-light-blue);
  background-image: url("../img/wave.svg"), url("../img/header-bg.jpg");
  background-repeat: no-repeat;
  background-position:
    center 1.3em,
    top center;
  background-size: 100%;
  width: 100%;
  height: 13em;
  z-index: 50;
  position: fixed;
}

.layout-container > header > div {
  height: 100%;
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-areas:
    ". social"
    "logo cta"
    "menu cta";
  position: relative;
}

/*Tablet Portrait*/
@media screen and (max-width: 799px) {
  .layout-container > header {
    position: fixed;
    background-position:
      center 2.2em,
      top center;
    background-size: 130%;
    width: 100%;
    height: 11em;
    z-index: 50;
  }

  .layout-container > header > div {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-template-rows: max-content;
    grid-template-areas:
      "nav"
      "logo";
  }
}

@media (max-width: 649px) {
  .layout-container > header {
    background-position:
      center 1.2em,
      top center;
  }
}
@media (max-width: 550px) {
  .layout-container > header {
    height: 9em;
  }
}
@media (max-width: 420px) {
  .layout-container > header {
    height: 9em;
  }
}
@media (max-width: 320px) {
  .layout-container > header {
    height: 8.5em;
  }
}

/* END Header */

/* BEGIN Content */

.layout‑sidebar‑before main {
  grid-template-columns: 1fr 2fr;
  grid-template-areas:
    "content-above content-above"
    "aside content"
    "content-below content-below";
}

.layout‑sidebar‑after main {
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    "content-above content-above"
    "content aside"
    "content-below content-below";
}

main {
  grid-area: main;
  display: grid;
  grid-template-areas:
    "content-above"
    "content"
    "content-below";
  padding-top: 13em;
}

main > .layout-content {
  grid-area: content;
  padding: 1.5em;
}

body.layout-sidebar-before main > .layout-content {
  padding-right: var(--discomke-horz-pad);
}

body.layout-sidebar-after main > .layout-content {
  padding-left: var(--discomke-horz-pad);
}

main aside.layout-sidebar-after,
main aside.layout-sidebar-before {
  grid-area: aside;
  padding: 1.5em;
}

main aside.layout-sidebar-before {
  padding-left: var(--discomke-horz-pad);
}

main aside.layout-sidebar-after {
  padding-right: var(--discomke-horz-pad);
}

section.layout-content-above {
  grid-area: content-above;
}

section.layout-content-below {
  grid-area: content-below;
  padding: 0 var(--discomke-horz-pad);
}

@media (max-width: 991px) {
  .node-66.layout-sidebar-after main {
    display: block;
  }
}
@media (max-width: 799px) {
  body.layout-sidebar-before main > .layout-content {
    padding-right: 1.3em;
  }
  .layout-sidebar-after main {
    display: block;
  }
  body.layout-sidebar-after main > .layout-content {
    padding: 0 1.5em 1.5em 1.5em;
  }
  body.layout-sidebar-after main aside.layout-sidebar-after {
    padding-left: 0;
  }
}

/*Tablet Portrait*/
@media screen and (max-width: 799px) {
  main {
    padding-top: 11em;
  }
}

@media (max-width: 650px) {
  .layout-sidebar-before main {
    display: block;
  }
}
@media (max-width: 550px) {
  main {
    padding-top: 8em;
  }
}
@media (max-width: 420px) {
  main {
    padding-top: 7em;
  }
}
@media (max-width: 320px) {
  main {
    padding-top: 6em;
  }
}

/* Footer */

footer {
  grid-column: 1;
  grid-row: footer;
  color: rgba(0, 59, 135, 1);
  color: var(--discomke-dark-blue);
  background-color: rgba(230, 230, 228, 1);
  background-color: var(--discomke-light-gray);
  display: grid;
  grid-template-rows: auto;
  grid-template-areas:
    "main"
    "footer-below"
    "footer-bottom";
}

footer > div:first-child {
  grid-area: main;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "menu cta"
    "menu social";
}

footer .layout-footer-below {
  grid-area: footer-below;
}

footer .layout-footer-below > div {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
}

footer .layout-footer-bottom {
  grid-area: footer-bottom;
}

@media (max-width: 550px) {
  footer > div:first-child {
    grid-template-columns: 1fr;
    grid-template-areas:
      "cta"
      "social"
      "menu";
  }

  footer .layout-footer-below > div {
    display: block;
  }
}

/* END Footer */

/* Templates */