.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;
  }

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

.heading {
  composes: g-type-display-3 from global;
}