.page-hero {
  --hero-image: url('https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=2200&q=88');
  background-image: linear-gradient(90deg, rgba(0, 20, 16, .92) 0%, rgba(0, 28, 22, .74) 48%, rgba(0, 13, 10, .68) 100%), var(--hero-image);
  background-position: center;
  background-size: cover;
}

.page-hero .lead {
  color: rgba(249, 245, 233, .9);
}

@media (max-width: 700px) {
  .page-hero { background-position: center; }
}