.hero-art {
  background-image:
    linear-gradient(90deg, rgba(16, 43, 56, 0.15), transparent 32%),
    url("/images/hero-lawn-mowing-v2.webp");
  background-position: 58% center;
  background-size: cover;
}

.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 18px 0 30px rgba(16, 43, 56, 0.12);
  pointer-events: none;
}

.north-badge {
  box-shadow: 0 12px 28px rgba(8, 27, 36, 0.24);
}

@media (max-width: 850px) {
  .hero-art {
    background-position: 64% center;
  }
}