.fizz-layout-header {
  padding: $spacing-8 $spacing-16;
  max-width: $breakpoint-xl;
  margin: 0 auto;
  display: grid;
  align-items: center;
  gap: $spacing-8;
  grid-template-columns: 38px 1fr auto auto;
  grid-template-rows: repeat(3, auto);
  grid-template-areas:
    "menu logo notifications cart"
    "user user user user"
    "search search search search"; 
  > [data-grid-area="menu"] {
    position: relative;
    grid-area: menu;
  }
  > [data-grid-area="logo"] { grid-area: logo; }
  > [data-grid-area="user"] { 
    grid-area: user;
    justify-self: center;
  }
  > [data-grid-area="notifications"] { grid-area: notifications; }
  > [data-grid-area="cart"] { grid-area: cart; }
  > [data-grid-area="search"] {
    grid-area: search;
    > input {
      width: 100%;
    }
  }
}

@media (min-width: $breakpoint-m) {
  .fizz-layout-header {
    padding: $spacing-8 $spacing-32;
    grid-template-columns: 38px 1fr auto auto auto;
    grid-template-rows: repeat(2, auto);
    grid-template-areas:
      "menu logo user notifications cart"
      "search search search search search"; 
  }
}

@media (min-width: $breakpoint-header-l) {
  .fizz-layout-header {
    grid-template-columns: 30px auto 1fr auto auto auto;
    grid-template-rows: auto;
    gap: $spacing-16;
    grid-template-areas:
      "menu logo search user notifications cart";
  }
}