.hero-wrapper 
  {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;  /* or 21/9, 16/9, 4/3, etc. */
  max-height: 40vh;     /* This means 40% of viewport height */
  min-height: 250px;
  overflow: hidden;
  }

.hero-wrapper img 
  {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;  /* Keep the top edge of the image visible */
  display: block;

  /* object-position: 50% 30%; /* If the center is wrong, set an x,y */
  }


.hero-row 
  {
  height: 50vh;           /* hero consumes half the viewport height */
  width: 100%;
  overflow: hidden;       /* crop image cleanly */
  position: relative;
  }

.hero-row img 
  {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;  /* Keep the top edge of the image visible */
  display: block;

  /* object-position: 50% 30%; /* If the center is wrong, set an x,y */
  }

.hero-environment 
  {
  position: relative;
  }

/*------------------------------------------------------------------------------
 * A linear-gradient darkening of the background image
 *
 * The following blends black into the hero image so that our lighter text gets
 * displayed more clearly. It goes like this...
 *
 * From 0 to 40% we go from 60% black to 40% black
 * From 40% to 60% we go from 40% black to 0% black
 */

/* Default: desktop/tablet (horizontal gradient) */
.hero-environment::before 
  { 
  content: ""; 
  position: absolute; 
  inset: 0; 
  background: linear-gradient(to top, 
                              rgba(0,0,0,0.6) 0%, 
                              rgba(0,0,0,0.2) 40%,
                              rgba(0,0,0,0) 60%);
  z-index: 1;
  }


/* Mobile: vertical gradient */ 
@media (max-width: 768px) 
  { 
  .hero-environment::before 
    { 
    background: linear-gradient(to top, 
                              rgba(0,0,0,0.6) 0%, 
                              rgba(0,0,0,0.3) 40%, 
                              rgba(0,0,0,0) 80% ); 
    } 
  }  

.hero-text 
  {
  position: absolute;
  bottom: 0%;
  left: 0;
  right: 0;
  z-index: 2;
  }