.hero {
  --hero-gradient-desktop:
    linear-gradient(
      to right,
      rgba(245,244,242,1) 0%,
      rgba(245,244,242,1) 16%,
      rgba(245,244,242,0.94) 32%,
      rgba(245,244,242,0.72) 46%,
      rgba(245,244,242,0.34) 60%,
      rgba(245,244,242,0.08) 78%,
      rgba(245,244,242,0.01) 100%
    );

  --hero-gradient-tablet:
    linear-gradient(
      to right,
      rgba(245,244,242,1) 0%,
      rgba(245,244,242,1) 28%,
      rgba(245,244,242,0.94) 46%,
      rgba(245,244,242,0.66) 62%,
      rgba(245,244,242,0.22) 80%,
      rgba(245,244,242,0.02) 100%
    );

  position: relative;
  min-height: calc(100vh - 84px);
  display: flex;
  align-items: center;
  padding: clamp(90px, 10vw, 140px) var(--pad);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    var(--hero-gradient-desktop),
    var(--hero-image);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

.home {
  --hero-image: image-set(
    url("../graphics/hero-image.webp") type("image/webp"),
    url("../graphics/hero-image.jpg") type("image/jpeg")
  );
}

.about {
  --hero-image: image-set(
    url("../graphics/about.webp") type("image/webp"),
    url("../graphics/about.jpg") type("image/jpeg")
  );
}

.projects {
  --hero-image: image-set(
    url("../graphics/projects.webp") type("image/webp"),
    url("../graphics/projects.jpg") type("image/jpeg")
  );
}

.scope-pricing {
  --hero-image: image-set(
    url("../graphics/pricing.webp") type("image/webp"),
    url("../graphics/pricing.jpg") type("image/jpeg")
  );
}

.contact {
  --hero-image: image-set(
    url("../graphics/contact.webp") type("image/webp"),
    url("../graphics/contact.jpg") type("image/jpeg")
  );
}

@media (max-width: 980px) {
  .hero {
    min-height: 720px;
    background:
      var(--hero-gradient-tablet),
      var(--hero-image);
    background-size: cover;
    background-position: 50% center;
    background-repeat: no-repeat;
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: auto;
    display: block;
    padding: 0;
    background: var(--bg-section-soft);
  }

  .hero-mobile-image {
    display: block;
    min-height: 420px;
    background-image: var(--hero-image);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }
}