@media (max-width: 980px) {
  body.auth-page {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    display: grid;
    align-items: center !important;
    justify-items: center;
    padding:
      max(28px, env(safe-area-inset-top))
      18px
      max(28px, env(safe-area-inset-bottom)) !important;
  }

  body.auth-page .auth-card {
    width: min(520px, calc(100vw - 44px));
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  body.auth-page {
    padding-top: max(28px, env(safe-area-inset-top)) !important;
    padding-bottom: max(32px, env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 980px) and (max-height: 660px) {
  body.auth-page {
    align-items: start !important;
    padding-top: max(14px, env(safe-area-inset-top)) !important;
    padding-bottom: 14px !important;
  }
}