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

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

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

.fizz-layout-sidebar-left > [data-grid-area="sidebar"] {
  grid-area: sidebar;
  padding: $spacing-32 $spacing-16;
}

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

@media (min-width: 700px) {
  .fizz-layout-sidebar-left {
    grid-template-rows: auto auto auto 1fr;
    grid-template-columns: $sidebar-width 1fr;  
    grid-template-areas: 
      "header header"
      "title title"
      "tabs tabs"
      "sidebar main";
  }
  
  .fizz-layout-sidebar-left > [data-grid-area="header"] {
    padding: $spacing-12 $spacing-32;
  }
  
  .fizz-layout-sidebar-left > [data-grid-area="title"] {
    padding: $spacing-24 $spacing-32;
  }
  
  .fizz-layout-sidebar-left > [data-grid-area="sidebar"] {
    padding: $spacing-32;
    border-right: $border-width-thin solid $color-border-default;
  }
  
  .fizz-layout-sidebar-left > [data-grid-area="main"] {
    padding: $spacing-32;
  }
}