.hero {
  min-height: 60vh;
}

.hero::before {
  background-position: center;
}

@media (min-width:640px) {
  .hero {
    min-height: 70vh; 
    align-items: flex-end;
  }
}


.hero-ft {
  background-image: url('hero-640.webp');
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
}



/* Larger tablets and small laptops */
@media (min-width: 768px) {
  .hero-ft {
    background-image: url('hero-1024.webp');
  }
}

/* Desktop */
@media (min-width: 1200px) {
  .hero-ft {
    background-image: url('hero-1440.webp');
  }
}

/* Large and hi-res displays */
@media (min-width: 1600px) {
  .hero-ft {
    background-image: url('hero-1920.webp');
  }
}

.hero::before {
  background-image: url("/images/hero-640.webp");
}

@media (min-width: 768px) {
  .hero::before {
    background-image: url('/images/hero-1024.webp');
  }
  }
  
  /* Desktop */
  @media (min-width: 1200px) {
  .hero::before {
    background-image: url('/images/hero-1440.webp');
  }
  }
  
  /* Large and hi-res displays */
  @media (min-width: 1600px) {
  .hero::before {
    background-image: url('/images/hero-1920.webp');
  }
  }

  .hero::after {
  background: radial-gradient(
    circle at center,
    rgba(0, 0, 0, 0.0),
    rgba(244, 144, 48, 0.66)
  );
  }