@layer components {

  /* Base
  /* ------------------------------------------------------------------------ */

  .auth {
    display: grid;
    grid-template-columns: minmax(0, var(--auth-panel-size, 32rem));
    justify-content: center;
    padding-block: clamp(var(--block-space-double), 10dvh, 6rem);
  }

  .auth__panel {
    background-color: var(--color-surface);
    border: var(--border);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow);
    inline-size: 100%;
    padding-block: var(--block-space-double);
    padding-inline: var(--block-space-double);
  }

  /* Header
  /* ------------------------------------------------------------------------ */

  .auth__header {
    margin-block-end: var(--block-space-double);
    text-align: center;
  }

  .auth__title {
    font-size: var(--text-x-large);
    font-weight: 600;
    letter-spacing: -0.025em;
  }

  .auth__subtitle {
    color: var(--color-ink-muted);
    font-size: var(--text-small);
    margin-block-start: var(--block-space-half);
  }

  /* Footer
  /* ------------------------------------------------------------------------ */

  .auth__footer {
    color: var(--color-ink-muted);
    font-size: var(--text-small);
    margin-block-start: var(--block-space);
    text-align: center;

    a {
      color: var(--color-link);
    }

    @media (any-hover: hover) {
      a:hover {
        color: var(--color-link-dark);
      }
    }
  }
}