main {
  & .hero {
    background: white;

    & .section-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 50vh;
      gap: 40px;
      border-bottom: 1px solid #d5d5d5;

      & .hero-text {
        width: 60%;
        padding: 24px 0;
        color: white;
      }

      & .hero-illustration {
        width: 40%;
        padding: 24px 0;
      }

      img {
        display: block;
        width: 100%;
      }
    }

    & span {
      display: block;
      margin-bottom: 24px;
      font-size: 18px;
      font-weight: 400;
      color: #666666;
      letter-spacing: -0.02em;
    }

    & h1 {
      margin-bottom: 24px;
      font-size: calc(44px + 0.2vw);
      letter-spacing: -0.02em;
      line-height: 1;
      color: #1c1c1c;

      & strong {
        font-weight: 800;
      }
    }

    & p {
      margin-bottom: 32px;
      font-size: 24px;
      font-weight: 400;
      line-height: 1.5;
      color: #1c1c1c;
      letter-spacing: -0.03em;
    }

    & .cta-box {
      display: flex;
      margin-bottom: 16px;
      gap: 12px;
    }

    & small {
      display: block;
      margin-bottom: 12px;
      font-size: 16px;
      font-weight: 400;
      color: #666666;
    }
  }
}

@media (max-width: 800px) {
  main {
    & .hero .section-wrapper {
      flex-direction: column;
      gap: 12px;

      & .hero-text,
      & .hero-illustration {
        width: 100%;
        padding: 0;
      }

      & h1 {
        font-size: 34px;
      }

      & p {
        font-size: 20px;
      }

      & .cta-box {
        flex-direction: column;

        & .cta-btn {
          justify-content: center;
        }
      }

      & small {
        text-align: center;
      }

      & .hero-illustration {
        padding-top: 0;
        text-align: center;

        & img {
          display: inline-block;
          width: 60%;
        }
      }
    }
  }
}