header {
  display: grid;
  /* This example has only one collumn and several rows, the first row gets
   * three units and the fifth row one; Because these rows are empty the
   * browser will use them first when it needs extra space, maxcontent insures
   * that the third row is the right size for the title. The nav row is
   * automaticaly scaled and the row with the logo has minmax with a minimum of
   * 100 pixels and a maximum of 350.
   */
  grid-template-rows: 3fr minmax(100px, 350px) max-content auto 1fr;
  justify-items: center;
  height: 100vh;
}

img {
  display: block;
}

header > img {
  grid-row: 2;
  height: 100%;
  width: 100%;
  object-fit: scale-down;
}

header > h1 {
  grid-row: 3;
}

header > nav {
  grid-row: 4;
  margin; 4rem;
}

nav li {
  float: left;
  border-right: 1px solid black;
  padding: 0 1.25rem;
  line-height: 0.75rem;
  height: 0.75rem;
  margin: 0;
}