.container-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "top below"
                       "menu search";
}
.container-header .container-topbar {
  background-color: #FFFFFF;
  padding: .5em;
  column-gap: 0px;
}
.container-header .container-topbar {
  grid-area: top;
}
.container-header .container-below-top {
  grid-area: below;
  background-color: #FFFFFF;
  justify-content: flex-end;
  column-gap: 0px;
}
.container-header .container-nav {
  grid-area: menu;
}
.container-header .container-search {
  grid-area: search;
}


@media (width >= 991.98px) {
  .container-header {
   grid-template-columns:
    [full-start] minmax(0,1fr)
    [main-start] repeat(4,minmax(0,19.875rem))
    [main-end] minmax(0,1fr)[full-end];
   grid-template-areas: ". nav nav nav .";
   gap: 0px;
  }
  .container-header:has(.container-below-top, .container-topbar) {
   grid-template-areas: ". top top below below ."
                        ". menu menu menu menu.";
  }
}