.hero {
  background:
    linear-gradient(90deg, #050505 0%, #050505f5 43%, #05050585 72%, #050505 100%),
    linear-gradient(0deg, #050505 0%, transparent 44%),
    url("sean-curl.webp") 78% 42% / min(64vw, 960px) auto no-repeat,
    #050505;
}

.offer.online {
  background:
    linear-gradient(145deg, #101214f2, #060708bd),
    linear-gradient(0deg, #070809 0%, transparent 70%),
    url("sean-pullup.webp") 58% 50% / cover no-repeat;
}

.offer.inperson {
  background:
    linear-gradient(145deg, #eff0ecef, #a9acafc9),
    url("sean-sauna.webp") 70% 48% / cover no-repeat;
}

.about {
  background:
    linear-gradient(90deg, #0506063d 0%, #080909 49%, #080909 100%),
    linear-gradient(0deg, #080909 0%, transparent 55%),
    url("sean-outdoor.webp") 8% 33% / 43% auto no-repeat,
    #080909;
}

@media (max-width: 900px) {
  .hero {
    background-position: center, center, 68% 52%;
    background-size: auto, auto, cover;
  }
  .about {
    background:
      linear-gradient(180deg, #0809097a 0%, #080909 55%),
      url("sean-outdoor.webp") center 10% / cover no-repeat,
      #080909;
    padding-top: 360px;
  }
}

@media (max-width: 560px) {
  .hero {
    background-position: center, center, 62% 44%;
  }
  .about { padding-top: 320px; }
}