.hero {
  background: #151412;
  overflow: clip;
}

.hero img {
  object-position: center 54%;
  transform: scaleX(-1);
}

.hero::after {
  background: linear-gradient(90deg, #151412 0%, #151412 20%, #151412e8 31%, #1514127a 46%, #15141215 59%, transparent 72%);
}

.hero h1 {
  font-family: "Barlow Condensed", Impact, sans-serif;
}

@media (max-width: 650px) {
  .hero {
    min-height: 510px;
    padding-block: 58px 42px;
  }

  .hero img {
    height: clamp(335px, 104vw, 510px);
    object-position: left center;
    transform: translateX(14%);
  }

  .hero::after {
    background:
      linear-gradient(0deg, #151412 16%, #151412ed 23%, #15141200 49%),
      linear-gradient(90deg, #151412 10%, #151412ed 19%, #15141280 42%, #1514120a 69%, transparent 83%);
  }

  .hero h1 {
    font-size: clamp(46px, 13.2vw, 74px);
  }

  .hero small {
    max-width: 21ch;
    line-height: 1.4;
  }

  .hero p {
    max-width: 21ch;
  }
}