.hero-art {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background: #b4c8bf;
}

.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--cream), transparent 15%),
              linear-gradient(0deg, rgba(13, 65, 59, .16), transparent 42%);
  pointer-events: none;
}

.hero-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% center;
}

@media (max-width: 960px) {
  .hero-art { min-height: 430px; }
  .hero-art img { object-position: center 55%; }
}

@media (max-width: 650px) {
  .hero-art { min-height: 310px; }
  .hero-art::after { background: linear-gradient(0deg, rgba(13, 65, 59, .18), transparent 45%); }
}