@layer components {
  .auth {
    display: grid;
    align-content: center;
    gap: var(--space-8);
    width: 100%;
    max-width: 360px;
    min-height: 100dvh;
    margin-inline: auto;
    padding: var(--space-8) var(--space-2);
  }

  .auth__head {
    display: grid;
    justify-items: center;
    gap: var(--space-4);
    text-align: center;

    & h1 { font-size: var(--text-xl); font-weight: 650; letter-spacing: -0.01em; }
    & p { font-size: var(--text-sm); color: var(--ink-muted); }
  }

  .auth__body { display: grid; gap: var(--space-3); }
  .auth__foot { justify-self: center; }
}