.header {
  @include grid(1fr auto auto,
  "utilities utilities utilities"
  "branding highlights burger"
  ". . ."
  );
  grid-template-rows: 2.5rem auto $grid-gutter;
  margin: 0 0 $grid-gutter;
  //border-bottom: 1px solid $color-divider-light;

  @include breakpoint(m) {
    grid-column: 4 / 14;
  }

  @include breakpoint(l) {
    grid-column: 3 / 15;
  }
}

.header__utilities {
  grid-area: utilities;
  text-align: right;

  .flag {
    display: inline-block;
    margin-left: $grid-gutter;
  }
}

.header__branding {
  grid-area: branding;
  align-self: center;

  img, figure, svg {
    height: 5rem;
  }
}

.site-logo {
  // Ensure focus outline in Firefox.
  display: inline-block;
  outline-offset: 3px;
}

.site-name {
  //display: inline-block;
  //position: relative;
  //top: .25rem;
  //left: $grid-gutter;
  //font-size: var(--font-size-xl);
  display: none;
}

.site-slogan {
  top: 1rem;
}


.header__highlights-menu {
  grid-area: highlights;
  align-self: end;
  display: none;

  @include breakpoint(m) {
    display: block;
  }

  ul.menu {
    margin: 0;
    padding: 0;
  }

  li {
    display: inline-block;
  }

  a {
    @extend %link-default;
    color: $color-link;
    text-decoration: none;
    font-weight: bold;
    border-width: 0;
    padding: .5rem 1rem;
  }
}

.header__burger {
  grid-area: burger;
  align-self: center;
}
