.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr;
  color: #fff;
  min-height: 650px;
  overflow: hidden;
  background: #18241d;
}

.hero-art,
.hero-shade,
.hero-copy {
  grid-area: 1 / 1;
}

.hero-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  min-height: 0;
  background: #18241d;
}

.hero-art img {
  position: static;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: center;
}

.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(10, 25, 16, .9) 0%, rgba(15, 31, 20, .72) 40%, rgba(12, 23, 16, .18) 74%, rgba(12, 23, 16, .08) 100%);
}

.hero-copy {
  width: min(760px, 62%);
  padding: 72px 7% 34px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .24);
}

.hero .intro {
  color: #f2f5ef;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}

@media (max-width: 850px) {
  .hero { grid-template-columns: 1fr; min-height: 570px; }
  .hero-copy { width: 74%; padding: 50px 7% 28px; }
  .hero-art { min-height: 0; }
}

@media (max-width: 600px) {
  .hero { min-height: 620px; }
  .hero-copy { width: 100%; min-height: 620px; padding: 48px 7% 28px; }
  .hero-art { min-height: 0; }
  .hero-art img { position: static; width: 100%; height: 100%; transform: none; object-position: 58% center; }
  .hero-shade { background: linear-gradient(180deg, rgba(9, 22, 14, .84) 0%, rgba(11, 24, 16, .58) 58%, rgba(8, 18, 12, .8) 100%); }
  .hero h1 { font-size: 44px; }
  .hero .intro br { display: none; }
}