/* Вход, регистрация и восстановление пароля. */

/* .main уже выставил flex-direction: column, поэтому по горизонтали
   карточку центрирует align-items, а не justify-content. */
.auth {
  display: flex;
  align-items: center;
  padding-block: clamp(24px, 4vw, 64px);
}

.auth__card {
  width: min(560px, 100%);
  padding: clamp(28px, 3vw, 56px);
  border-radius: var(--radius-card);
  border: 2px solid var(--ink);
  background: var(--cream);
  animation: pop-in 0.5s cubic-bezier(0.22, 0.7, 0.2, 1) both;
}

.auth__title {
  font-size: clamp(30px, 3vw, 48px);
  line-height: 1.1;
}

.auth__lead {
  margin: 14px 0 28px;
  font-family: var(--font-mono);
  font-size: 17.3px;
  line-height: 1.4;
}

.auth__field {
  display: block;
  margin-bottom: 18px;
}

.auth__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 28px;
}

.auth__links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 15px;
}

.auth__remember {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 15px;
}