.hero-cover {
  grid-template-columns: minmax(280px, .78fr) minmax(360px, 1.22fr);
  padding-block: clamp(2rem, 5vw, 4.5rem);
}

.hero-cover .hero-art {
  justify-self: center;
  width: min(100%, 520px);
}

.hero-cover .hero-art::before {
  inset: 12% 8%;
  background: rgba(167, 181, 160, .22);
}

.hero-cover .hero-art img {
  max-height: calc(100vh - 130px);
  border: 1px solid rgba(90, 70, 50, .12);
  box-shadow: 0 24px 70px rgba(56, 48, 38, .16);
}

.hero-welcome h1 {
  font-size: clamp(3rem, 6.2vw, 6.4rem);
}

@media (max-width: 760px) {
  .hero-cover {
    grid-template-columns: 1fr;
  }

  .hero-cover .hero-art {
    grid-row: 1;
    width: min(100%, 430px);
  }

  .hero-cover .hero-art img {
    max-height: none;
  }
}