header {
  padding-top: 100px;
  padding-bottom: var(--mergPad);
  min-height: 100vh;
  border-bottom-left-radius: 100px 45px;
  border-bottom-right-radius: 100px 45px;
  display: grid;
  grid-template:
    "content" max-content
    "contact" max-content;
  justify-content: center;
  background: linear-gradient(
    to right,
    #eeb96f 0%,
    #fddda8 20%,
    #fde7c0 60%,
    #fde7c0 100%
  );
  gap: var(--mergPad);
  justify-content: center;
  justify-items: center;
}
/****** Logo *****/
header > #logo {
  grid-area: logo;
  display: none;
}
/****** Contact *****/
header > #contact {
  grid-area: contact;
  display: grid;
  grid-auto-rows: max-content;
  gap: var(--titleGap);
  white-space: nowrap;
}
/****** Content *****/
header #content {
  grid-area: content;
  display: grid;
  grid-template-rows: repeat(auto-fit(min-content));
  white-space: nowrap;
}
/* Navigation */
header #content > nav {
  font-size: var(--navigation);
  font-weight: bold;
  justify-items: center;
  display: none;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  gap: var(--mergPad);
}
/* Container */
header #content > #container {
  display: grid;
  grid-template-rows: repeat(auto-fill,max-content);
  gap: var(--mergPad);
  justify-items: center;
}
header #content > #container > img{
  max-width: 100%;
}
header > div#content > div#container > div:first-child {
  display: grid;
  grid-template-rows: max-content;
  gap: var(--titleGap);
  justify-content: center;
  font-style: italic;
  text-align: center;
}
header #content img#spread {
  max-width: 300px;
  width: 100%;
}

/****** For Laptop *****/
@media screen and (min-width: 960px) {
  /***** For Tablets *****/
  @media screen and (min-height: 950px) {
    header {
      min-height: 950px;
    }
  }
  header {
    grid-template:
      "logo contact" max-content
      "content .";
    justify-content: space-between;
    background: url(images/board_2.webp),
      linear-gradient(
        to right,
        #eeb96f 0%,
        #fddda8 20%,
        #fde7c0 60%,
        #fde7c0 100%
      );
    background-repeat: no-repeat;
    background-position: bottom right;
    padding: var(--titleGap);
    padding-bottom: var(--mergPad);
    margin-top: 0px;
    align-content: top;
  }
  header #content img#spread {
    max-width: fit-content;
  }
  header > #logo {
    grid-area: logo;
    display: grid;
    grid-auto-rows: max-content;
  }
  header #content {
    gap: var(--mergPad);
    align-content: flex-start;
    justify-items: center;
  }
  header #content > nav {
    display: grid;
  }
  header > #contact {
    justify-self: end;
    grid-auto-rows: initial;
    grid-template-columns: auto auto;
    margin-right: 150px;
    align-items: center;
  }

  /****** For PC *****/
  @media screen and (min-width: 1300px) {
    header {
      grid-template:
        "logo content contact" min-content
        ". content ." 1fr
        /1.8fr 1fr 2fr;
      background: url(images/board_2.webp), url(images/magazine.webp),
        linear-gradient(
          to right,
          #eeb96f 0%,
          #fddda8 20%,
          #fde7c0 60%,
          #fde7c0 100%
        );
      background-repeat: no-repeat, no-repeat;
      background-position: right top 100px, left bottom, 0 0;
      background-size: auto, 500px, auto;
    }
    header #content > #container > img{
      display: none;
    }
    header > #logo {
      justify-self: start;
      margin-left: 50px;
    }
    header #content {
      gap: 20%;
      margin-top: 60px;
    }
  }
}