@layer components {
  .auth-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-block-start: var(--block-space-double);
  }

  .auth-card {
    background: var(--color-canvas);
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-inline-size: 400px;
    inline-size: 100%;
    padding: var(--block-space-double) var(--inline-space-double);
  }

  .auth-card__icon {
    font-size: var(--text-xx-large);
    display: block;
    margin-block-end: var(--block-space);
  }

  .auth-card__title {
    font-size: var(--text-large);
    font-weight: 700;
    margin-block-end: var(--block-space);
  }

  .auth-card__field {
    margin-block-end: var(--block-space);
  }

  .auth-card__footer {
    text-align: center;
    margin-block-start: var(--block-space);
  }
}