.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #090c10;
}

.login-card {
  width: min(390px, 100%);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 32px;
  box-shadow: 0 20px 50px rgb(0 0 0 / 25%);
}

.login-card .brand-mark { margin-bottom: 22px; }
.login-card h1 { margin-bottom: 5px; font-size: 25px; }
.login-card > p { margin-bottom: 24px; }
.login-card form { display: grid; }
.login-card input { margin-bottom: 16px; }
.login-card .button { margin-top: 4px; }

@media (max-width: 480px) {
  .login-page { padding: 0; background: var(--surface); }
  .login-card { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; border: 0; border-radius: 0; }
}