.ctaHero {
  & :global(.g-text-split) :global(.g-grid-container) {
    @media (width < 1120px) {
      flex-direction: column-reverse;
    }

    & > div {
      @media (768px < width < 1120px) {
        width: 40em;
      }

      &:last-child {
        @media (width < 1120px) {
          margin-bottom: 64px;
          text-align: center;
        }

        & p {
          @media (width < 1120px) {
            margin: 16px auto;
          }
        }
      }
    }

    /**
     * HACK:
     * Overrides the H2 with styling from
     * our global g-type-display-1 class.
     *
     * This was because there's no way to
     * override the heading in <TextSplit />
     * with the designed h1 styling.
     *
     * TODO:
     * Address this at the component
     * level or revert to just using h2
     * as is default.
     */
    & h2 {
      font-size: 2.125rem;
      letter-spacing: -0.008em;
      line-height: 1.265em;

      @media (--medium-up) {
        font-size: 2.625rem;
        letter-spacing: -0.01em;
        line-height: 1.19em;
      }

      @media (--large) {
        font-size: 3.125rem;
        line-height: 1.2em;
      }
    }

    & p {
      max-width: 440px;
    }
  }
}

.cta {
  max-width: 525px;
  border: var(--gray-5) 1px solid;
  padding: 32px;
  position: relative;
  margin-top: 44px;
  margin-left: auto;
  margin-right: auto;

  @media (min-width: 1120px) {
    margin-top: unset;
    margin-left: unset;
    margin-right: unset;

    /* Pull this down on Desktop to line the
     * buttons up with the other CTA buttons */
    margin-bottom: -38px;
  }

  & > h3 {
    margin-top: 0;
    margin-bottom: 16px;
    max-width: 135px;
  }

  & > p {
    color: var(--gray-3);
    margin-top: 28px;
    margin-bottom: 40px;
  }

  & .stackIcon {
    display: block;
    margin-left: auto;
    margin-right: auto;

    & svg {
      position: absolute;
      max-width: 100%;
      left: 209px;
      top: -34px;

      @media (max-width: 600px) {
        right: 20px;
        left: unset;
      }

      @media (max-width: 470px) {
        position: unset;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 18px;
      }
    }
  }
}

.description {
  composes: .g-type-body-small from global;
}