.hero {
  grid-template-columns: 1fr 1.05fr;
  gap: 4vw
}

.copy {
  align-self: start;
  margin-top: 5vh;
  max-width: 610px
}

.art {
  align-self: end;
  height: 88%
}

.copy h1 {
  font-family: "Heiti SC","PingFang SC",sans-serif;
  font-weight: 500
}

.brand {
  font-family: Menlo,"PingFang SC",monospace;
  font-size: 17px
}

.page {
  background: linear-gradient(90deg,#14222a 0%,#14222a 61%,#192d36 61%)
}

.copy p {
  color: #b7cbd3
}

@media(max-width:767px) {
  .copy {
    margin-top: 0
  }
  .art {
    height: 275px
  }
  .page {
    background: #14222a
  }
}

.hero {
  display: block;
  position: relative;
  padding-top: 3vh
}

.copy {
  width: 59%;
  margin-top: 0;
  position: relative;
  z-index: 1
}

.copy p {
  max-width: 28em;
  margin-top: 10vh
}

.art {
  position: absolute;
  right: -4vw;
  bottom: -2vh;
  width: 57%;
  height: 76%;
  opacity: .8
}

.copy h1 {
  font-size: clamp(42px,4.8vw,70px)
}

@media(max-width:767px) {
  .hero {
    display: flex;
    position: static;
    padding-top: 0
  }
  .copy {
    width: 100%
  }
  .copy p {
    margin-top: 20px
  }
  .art {
    position: static;
    width: 100%;
    height: 260px;
    opacity: 1
  }
}