.g-basic-hero {
  padding: 88px 0;

  & .g-type-display-1 {
    color: var(--gray-1);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    max-width: 14em;
  }

  & .g-type-body-large {
    color: var(--gray-2);
    margin: 0 auto 0 auto;
    text-align: center;
    max-width: 40em;
  }

  & .links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;

    /*
     * Margins here compensate for extra 8px margin on buttons
     * which are needed to center and space properly regardless of whether
     * buttons are wrapping to multiple lines or not.
     */
    margin-top: calc(32px - 8px);
    @media (--large) {
      margin-top: calc(40px - 8px);
    }
  }
}