.hero-banner{
  min-height: 360px;
  background-image: url("../../img/banner.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
@media (min-width: 768px){
  .hero-banner{ min-height: 440px; }
}
@media (min-width: 1200px){
  .hero-banner{ min-height: 520px; }
}

/* Soft overlay so white text reads well on the image */
.hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, rgba(0,0,0,.35), rgba(0,0,0,.15));
}

/* Section divider to replace <hr> */
.section-rule{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.18), transparent);
  border: 0;
}