main[data-page="ask"] [data-ask-hero] {
  display: grid;
  place-content: center;
  width: min(100%, 44rem);
  min-height: 100%;
  margin-inline: auto;
  padding: 6rem 1.5rem 10rem;
  text-align: center;

  > p,
  > h1 {
    margin: 0;
  }

  > p:first-child {
    color: var(--orange);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-strong);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }

  > h1 {
    margin-top: 0.75rem;
    font-family: var(--font-serif);
    font-size: clamp(2.75rem, 5vw, 3.75rem);
    font-weight: var(--font-weight-regular);
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  > p:nth-child(3) {
    max-width: 28rem;
    margin: 0.75rem auto 0;
    color: var(--gray);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    text-wrap: balance;
  }

  > nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    width: min(100%, 38rem);
    margin-top: 1.5rem;
    margin-inline: auto;

    > button {
      justify-content: space-between;
      gap: 0.625rem;
      width: 100%;
      min-height: var(--ask-control-size);
      border-radius: var(--control-radius);
      padding: 0.5rem 0.75rem;
      font-size: var(--font-size-sm);
      line-height: var(--line-height-sm);
      text-align: left;
      text-transform: none;

      > span {
        color: inherit;
        opacity: 0.55;
      }
    }
  }
}

@media (max-width: 48rem) {
  main[data-page="ask"] [data-ask-hero] {
    padding: 6rem 1rem 8rem;
  }
}

@media (max-width: 32rem) {
  main[data-page="ask"] [data-ask-hero] {
    > h1 {
      font-size: 3.25rem;
    }

    > nav {
      grid-template-columns: 1fr;
      width: min(100%, 20rem);
    }
  }
}