.fizz-layout-header-50-50 {
  display: grid;
  grid-template-rows: auto auto 1fr;
  grid-template-areas: 
    "header"
    "aside"
    "main";
  background-color: $color-background-surface;
}

.fizz-layout-header-50-50 [data-grid-area="header"] {
  grid-area: header;
  padding: $spacing-16;
  border-bottom: $border-width-thin solid $color-border-default;
}

.fizz-layout-header-50-50 [data-grid-area="aside"] {
  grid-area: aside;
  padding: $spacing-16 $spacing-32;
  background: none !important;
}

.fizz-layout-header-50-50 [data-grid-area="main"] {
  grid-area: main;
  padding: $spacing-12;
  background-color: $color-background-body;
}

.fizz-layout-header-50-50 [data-grid-area="main"] > form {
  padding: $spacing-32 $spacing-24;
}

@media (min-width: $breakpoint-m) {
  .fizz-layout-header-50-50 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: 
      "header header"
      "aside main";
  }

  .fizz-layout-header-50-50 [data-grid-area="header"] {
    padding: $spacing-24;
  }

  .fizz-layout-header-50-50 [data-grid-area="aside"] {
    padding: $spacing-64 $spacing-24;
    background-repeat: no-repeat;
    background-position: 50% bottom;
  }

  .fizz-layout-header-50-50 [data-grid-area="main"] {
    padding: $spacing-64 $spacing-24;
  }

  .fizz-layout-header-50-50 [data-grid-area="aside"] > *,
  .fizz-layout-header-50-50 [data-grid-area="main"] > * {
    max-width: $one-col-max-width;
    margin: 0 auto;
  }
}

@media (min-width: $breakpoint-l) {
  .fizz-layout-header-50-50 [data-grid-area="main"] > form {
    padding: $spacing-48 $spacing-64;
  }
}