.fizz-layout-3-2 {
  > [data-grid-area="title-bar"] {
    grid-area: title-bar;
    background-color: $color-background-brand;
    color: $color-text-inverse;
    > .fizz-container {
      padding: $spacing-4 $spacing-16 $spacing-24 $spacing-16;
    }
  }
  > [data-grid-area="main"]  {
    grid-area: main;
    > .fizz-container {
      padding: $spacing-16;
      margin-top: -#{$spacing-32};
      display: grid;
      gap: $spacing-8;
      grid-template-columns: auto;
    }
  }
  .fizz-container {
    max-width: $max-width-medium;
  }
}

@media (min-width: $breakpoint-m) {
  .fizz-layout-3-2 {
    > [data-grid-area="main"] > .fizz-container {
      grid-template-columns: 3fr 2fr;
      gap: $spacing-16;
    }
  }
}