#hero {
  min-height: 100vh;

  display: flex;
  align-items: center;

  & .grid-2 {
    gap: 80px;

    & .hero-content {
      justify-content: center;
      align-items: center;

      @media (min-width: 1024px) {
        align-items: flex-start;
      }
      
      & h1,
      & p {
        @media (min-width: 1024px) {
          text-align: left;
        }

      }

      & .highlight {
        color: var(--stb-orange);
      }

      & .button-notice {
        display: flex;
        align-items: center;
        gap: 20px;
        flex-direction: column;
        
        @media (min-width: 640px) {
          flex-direction: row;
        }

        & .notice {
          display: flex;
          align-items: center;
          gap: 8px;
        }
      }
    }

    & .hero-illustration {
      border-radius: 40px;
      overflow: hidden;
    }
  }

}