.header {
  --header-height: 50px;

  display: grid;
  grid-template-columns: 50px repeat(2, 1fr);
  grid-template-areas: "logo search menu";
  padding: .5rem 1.5rem;

  & .logo {
    width: 50px;
  }
}

.body--mobile .header {
  grid-template-columns: 50px 1fr auto;
  grid-template-areas: "logo search user";
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  box-sizing: border-box;
  width: 100%;
  overflow: visible;

  & .search--header {
    grid-area: search;
    padding: 0;

    & .search__input {
      width: 100%;
      box-sizing: border-box;
    }
  }

  & .header__user {
    grid-area: user;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
  }
}

.header__logo {

}

.header__search {

}