@media (max-width: 800px) {

  .auth-page {
    display: block;

    min-height: 100vh;

    background: var(--white);
  }

  .auth-brand {
    min-height: auto;

    padding:
      max(28px, env(safe-area-inset-top))
      22px
      28px;

    justify-content: flex-start;
  }

  .rugby-logo {
    width: 54px;
    height: 54px;

    margin-bottom: 18px;

    border-radius: 14px;

    font-size: 28px;
  }

  .eyebrow {
    font-size: 0.7rem;
  }

  .auth-brand h1 {
    font-size: 3.2rem;

    line-height: 0.9;
  }

  .brand-description {
    margin-top: 18px;

    font-size: 0.92rem;

    line-height: 1.5;
  }

  .auth-card {
    padding:
      26px
      20px
      max(40px, env(safe-area-inset-bottom));
  }

  .auth-tabs {
    margin-bottom: 30px;
  }

  .auth-tab {
    min-height: 48px;

    font-size: 0.88rem;
  }

  .auth-card h2 {
    font-size: 1.6rem;
  }

  form input,
  form select {
    /*
     * 16px prevents iOS Safari from zooming
     * when a form field receives focus.
     */
    font-size: 16px;
  }

  .primary-button {
    min-height: 52px;
  }
}


@media (max-width: 380px) {

  .auth-brand h1 {
    font-size: 2.8rem;
  }

  .auth-card {
    padding-left: 16px;
    padding-right: 16px;
  }

}