.root {
  composes: .g-grid-container from global;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 64px auto; /* this is being overridden at the request of the learn team */
  max-width: 784px;
  min-height: 50vh;
  padding-inline: 32px;
  text-align: center;

  @media (--large) {
    padding-inline: 24px;
  }

  & h1 {
    font-size: 1.5rem;
    letter-spacing: -0.004em;
    line-height: 1.375em;

    @media (--medium-up) {
      font-size: 1.75rem;
      line-height: 1.321em;
    }

    @media (--large) {
      font-size: 2rem;
      letter-spacing: -0.006em;
      line-height: 1.313em;
    }
  }

  & a {
    color: var(--highlight-color);
  }
}