.header {
  margin-bottom: 6em;
  margin-bottom: clamp(3em, 5vw, 6em);
  overflow: hidden;
}
.header .container {
  background-image: url("../img/background-image/Hangweide_Backdrop.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  max-height: 100svh;
  display: grid;
  grid-template-rows: repeat(20, 0.09fr);
  grid-template-columns: repeat(20, 0.2fr);
}
.header .container h1 {
  text-align: left;
  grid-row: 10/16;
  grid-column: 4/13;
  z-index: 3;
  margin-bottom: 0;
}
.header .container .panel {
  z-index: 2;
  grid-row: 1/22;
  grid-column: 7/18;
  -webkit-clip-path: polygon(5% 17%, 47% 0, 99% 12%, 93% 29%, 94% 70%, 28% 100%, 5% 66%, 12% 58%);
  clip-path: polygon(5% 17%, 47% 0, 99% 12%, 93% 29%, 94% 70%, 28% 100%, 5% 66%, 12% 58%);
}
.header .container .panel img {
  width: 100%;
  height: 100%;
}
.header .container .logo-container {
  z-index: 3;
  grid-row: 17/18;
  grid-column: 15/18;
  max-height: 35svh;
}
.header .container .landscape-bottom {
  z-index: 3;
  grid-row: 21/21;
  grid-column: 1/21;
}
.header .container .landscape-bottom img {
  width: 100%;
  height: 100%;
}

@media (max-width: 1100px) {
  .header .container h1 {
    text-align: left;
    grid-row: 5/15;
    grid-column: 2/11;
    z-index: 3;
    margin-bottom: 0;
  }
}
@media (max-width: 700px) {
  .header .container {
    grid-template-rows: repeat(14, 1fr);
    grid-template-columns: repeat(14, 1fr);
  }
  .header .container h1 {
    grid-row: 3/7;
    grid-column: 2/14;
    z-index: 3;
    margin-bottom: 0;
  }
  .header .container .panel {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    grid-row: 8/16;
    grid-column: 1/16;
  }
  .header .container .logo-container {
    z-index: 3;
    grid-row: 7/12;
    grid-column: 9/14;
  }
  .header .container .landscape-bottom {
    grid-row: 14/16;
    grid-column: 1/16;
  }
}