.fizz-layout-1-col-wide {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  min-height: 100vh;
  background-color: $color-white;
  grid-template-areas: 
    "header"
    "title"
    "tabs"
    "main";
}

.fizz-layout-1-col-wide > [data-grid-area="header"] {
  grid-area: header;
  background-color: $color-background-brand;
  color: $color-text-inverse;
  padding: $spacing-12 $spacing-16;
}

.fizz-layout-1-col-wide > [data-grid-area="title"] {
  grid-area: title;
  padding: $spacing-24 $spacing-16;
  border-bottom: $border-width-thin solid $color-border-default;
}

.fizz-layout-1-col-wide > [data-grid-area="tabs"] {
  grid-area: tabs;
  border-bottom: $border-width-thin solid $color-border-default;
  height: calc(100% - 1px);
  overflow-x: auto;
  overflow-y: hidden;
}

.fizz-layout-1-col-wide > [data-grid-area="tabs"] .fizz-tab-list {
  max-width: $breakpoint-xl;
}

.fizz-layout-1-col-wide > [data-grid-area="main"] {
  grid-area: main;
  padding: $spacing-32 $spacing-16;
}

.fizz-layout-1-col-wide > * > *:not([data-grid-area="main"]) {
  max-width: calc(#{$breakpoint-xl} - #{$spacing-64});
  margin: 0 auto;
}

@media (min-width: $breakpoint-m) {
  .fizz-layout-1-col-wide > [data-grid-area="header"] {
    padding: $spacing-12 $spacing-32;
  }

  .fizz-layout-1-col-wide > [data-grid-area="title"] {
    padding: $spacing-24 $spacing-32;
  }

  .fizz-layout-1-col-wide > [data-grid-area="main"] {
    padding: $spacing-32;
  }
}