.hero {
  background-color: var(--green);
  background-image:
    linear-gradient(90deg, rgba(12, 24, 16, 0.78), rgba(12, 24, 16, 0.28) 60%),
    url("hero1.png");
  background-position: center, center 45%;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
}

@media (max-width: 720px) {
  .hero { background-position: center, 62% center; }
}