.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-3);
    margin: 0 auto 0 auto;
    text-align: center;
    max-width: 40em;
  }

  & .links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /*
     * 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);
    margin-bottom: -8px;
    @media (--large) {
      margin-top: calc(40px - 8px);
    }

    & .g-btn {
      /*
       * This ensures 16px between buttons at all times, while maintaining proper centering
       * when buttons wrap to multiple lines.
       * There will be an extra 8px space on all sides of the button group.
       * The top and bottom are accounted for by the -8px adjustment on `.action` margins.
       * The left and right excess is left as is - it's needed for proper centering when wrapping.
       */
      margin: 8px;
    }
  }

  &.has-background {
    background-repeat: no-repeat;
    background-color: var(--gray-7);
    background-image: url(/img/hero-pattern.svg);
    width: 100%;
    background-size: cover;
    background-position: center;

    @media (max-width: 800px) {
      background-image: url(/img/hero-pattern-mobile.svg);
    }

    & .g-btn {
      background: var(--gray-7);
    }
  }
}