#hero {
  position: relative;

  .hero-bg {
    scale: 3;
    position: absolute;
    top: 40rem;
    left: 10rem;
    width: 100%;
    height: auto;

    @media screen and (min-width: 768px) {
      scale: 2;
      top: 9rem;
      left: unset;
    }

    @media screen and (min-width: 1400px) {
      scale: 1;
      top: -5rem;
    }

    @media screen and (min-width: 1600px) {
      top: -26rem;
    }
  }

  .container {
    text-align: center;
    padding-block: 7.5rem 20rem;
  }

  .hero-eyebrow {
    letter-spacing: 1.44px;
  }

  .hero-headline {
    margin-block-end: 1.4rem;
    color: var(--primary-300);
    letter-spacing: -1.2px;
    line-height: 1.15;

    @media screen and (max-width: 767px) {
      margin-block-end: 3rem;
    }

    sup {
      font-size: 3.2rem;
      font-weight: 300;
      color: var(--neutral-400);
      opacity: 0.75;
      top: 20px;
      position: relative;
      vertical-align: top;

      @media screen and (max-width: 767px) {
        top:10px;
      }

    }
  }

  .hero-subheading {
    margin-block-end: 6.3rem;
    line-height: 1.2;
    letter-spacing: 0.16px;

    strong {
      font-style: italic;
    }

    @media screen and (max-width: 767px) {
      margin-block-end: 4rem;
    }
  }

  .hero-ctas {
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 2.9rem;

    @media screen and (max-width: 767px) {
      flex-direction: column;
      gap: 1.4rem;
    }
  }
}