.fizz-layout-primary {
  background-color: $color-background-surface;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto;
  grid-template-areas: 
    "header"
    "main"
    "footer";
  > [data-grid-area="header"] {
    grid-area: header;
    background-color: $color-background-brand;
    color: $color-text-inverse;
    .fizz-logo {
      fill: currentColor;
      height: $icon-size-medium;
      width: auto;
    }
    a {
      color: inherit;
    }
    .fizz-container {
      padding: $spacing-12 $spacing-16;
    }
  }
  > [data-grid-area="main"] {
    grid-area: main;
    font-size: $text-medium-font-size;
    line-height: $text-medium-line-height;
  }
  > [data-grid-area="footer"] {
    grid-area: footer;
    background-color: $color-background-subdued;
    color: $color-text-inverse;
    font-size: $text-medium-font-size;
    line-height: $text-medium-line-height;
    a {
      color: inherit;
    }
    .fizz-container {
      padding: $spacing-24 $spacing-16;
    }
  }
}

@media (min-width: $breakpoint-m) {
  .fizz-layout-primary {
    [data-grid-area="header"] {
      .fizz-logo {
        height: $icon-size-xlarge;
      }
    }
  }
}