.fizz-layout-header-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(min-content, $breakpoint-l) minmax(0, 1fr);
  grid-template-rows: auto;
  grid-gap: $spacing-16;
  grid-template-areas:
  "header header header"
  ". section ."
  ". main .";
}

.fizz-layout-header-main [data-grid-area="header"] {
  grid-area: header;
  background-color: white;
  padding: $spacing-24 $spacing-16;
}

.fizz-layout-header-main [data-grid-area="header"] > * {
  max-width: $breakpoint-l;
  margin: 0 auto;
}

.fizz-layout-header-main [data-grid-area="section"] {
  grid-area: section;
}

.fizz-layout-header-main [data-grid-area="main"] {
  grid-area: main;
  border: solid $color-border-default;
  border-width: $border-width-thin $border-width-thin 0 $border-width-thin;
}