html,
body {
  min-width: 320px;
  min-height: 100%;
}

.login-page {
  min-height: 100vh;
  background: var(--color-neutral-100);
}

.login-stage {
  display: grid;
  min-height: 100vh;
  padding: 48px 24px;
  place-items: center;
}

.login-stage .auth-card {
  height: auto;
  min-height: 510px;
}

.login-stage .auth-card:has(.auth-message) {
  min-height: 616px;
}

.login-stage .auth-card__header {
  text-align: center;
}

.login-stage .auth-field {
  min-height: 72px;
}

.login-stage .auth-field input:focus,
.login-stage .auth-field--focus input {
  border-color: var(--color-neutral-300);
  box-shadow: none;
}

.login-stage .auth-field:has(.auth-field__error) {
  min-height: 98px;
}

@media (max-width: 560px) {
  .login-stage {
    padding: 24px 16px;
  }

  .login-stage .auth-card {
    width: min(500px, 100%);
    min-height: auto;
    padding: 32px 24px;
  }

  .login-stage .auth-card__header,
  .login-stage .auth-fields,
  .login-stage .auth-field,
  .login-stage .auth-field input,
  .login-stage .auth-message,
  .login-stage .auth-submit {
    width: 100%;
  }
}