@layer components {
  /* Where a person confirms a verification link sent to them. */
  .verification {
    display: grid;
    align-content: start;
    gap: 1.5rem;
    inline-size: min(100% - 2rem, 28rem);
    min-block-size: 100dvh;
    margin-inline: auto;
    padding-block: 3rem;
    color: var(--foreground);

    p { margin: 0; }

    .button { inline-size: 100%; }
  }

  .verification__header {
    display: grid;
    gap: 0.5rem;
  }

  .verification__title {
    margin: 0;
    font-size: var(--text-2xl);
    text-wrap: balance;
  }
}