@supports (display: grid) {
  .site-grid {
    display: grid;
    grid-template-areas: ". head head head head ."
      ". banner banner banner banner ."
      ". top-a top-a top-a top-a ."
      ". top-b top-b top-b top-b ."
      ". comp comp comp comp ."
      ". side-r side-r side-r side-r ."
      ". side-l side-l side-l side-l ."
      ". bot-a bot-a bot-a bot-a ."
      ". bot-b bot-b bot-b bot-b ."
      ". footer footer footer footer ."
      ". debug debug debug debug .";
    grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 19.875rem)) [main-end] minmax(0, 1fr) [full-end];
    grid-gap: 0 $cassiopeia-grid-gutter;

    > [class^="container-"],
    > [class*=" container-"] {
      width: 100%;
      max-width: none;
      column-gap: $cassiopeia-grid-gutter;
    }

    &:not(.has-sidebar-left) .container-component {
      grid-column-start: main-start;
    }

    &:not(.has-sidebar-right) .container-component {
      grid-column-end: main-end;
    }

    > .full-width {
      grid-column: full-start / full-end;
    }

    @include media-breakpoint-up(md) {
      grid-template-areas: ". head head head head ."
        ". banner banner banner banner ."
        ". top-a top-a top-a top-a ."
        ". top-b top-b top-b top-b ."
        ". side-l comp comp side-r ."
        ". bot-a bot-a bot-a bot-a ."
        ". bot-b bot-b bot-b bot-b ."
        ". footer footer footer footer .";
    }

    &.wrapper-fluid {
      grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 25%)) [main-end] minmax(0, 1fr) [full-end];
      grid-gap: 0 ($cassiopeia-grid-gutter*2);
      .grid-child {
        max-width: none;
      }
      header > .grid-child,
      footer > .grid-child {
        padding-right: $cassiopeia-grid-gutter*2;
        padding-left: $cassiopeia-grid-gutter*2;
      }
    }
  }
}

.container-header {
  grid-area: head;
}

.container-banner {
  grid-area: banner;
}

.container-top-a {
  grid-area: top-a;
}

.container-top-b {
  grid-area: top-b;
}

.container-component {
  grid-area: comp;
}

.container-sidebar-left {
  grid-area: side-l;
}

.container-sidebar-right {
  grid-area: side-r;
}

.container-main-top {
  grid-area: main-t;
}

.container-main-bottom {
  grid-area: main-b;
}

.container-breadcrumbs {
  grid-area: bread;
}

.container-bottom-a {
  grid-area: bot-a;
}

.container-bottom-b {
  grid-area: bot-b;
}

.container-footer {
  grid-area: footer;
}