@media (max-width: 600px) {

  /* Reduce background padding */
  body {
    padding: 0;
  }

  /* Logo */
  .login-hero img {
    height: 64px;
  }

  /* Container spacing */
  .login-wrap,
  .register-wrap,
  .forgot-wrap {
    max-width: 100%;
    margin: 12px 12px 40px;
  }

  /* Card itself */
  .card {
    padding: 22px 18px;
    border-radius: 18px;
  }

  /* Headings */
  .card h1 {
    font-size: 1.6rem;
  }

  /* Labels */
  label {
    font-size: 0.95rem;
  }

  /* Inputs & selects */
  .input-wrap input,
  .input-wrap select {
    height: 48px;
    font-size: 1rem;
    border-radius: 12px;
  }

  /* Icons inside inputs */
  .input-wrap .lead {
    font-size: 1.05rem;
  }

  /* Password eye */
  .toggle-pass {
    padding: 10px;
    font-size: 1.1rem;
  }

  /* Buttons */
  .btn.primary {
    height: 52px;
    font-size: 1.05rem;
    border-radius: 14px;
  }

  /* Remember me row */
  .remember-check {
    font-size: 1rem;
    gap: 12px;
  }

  .remember-check .box {
    width: 20px;
    height: 20px;
  }

  /* Footer links */
  .login-extra {
    font-size: 1rem;
    margin-top: 16px;
  }
  
  /* FULL-WIDTH on mobile */
.login-wrap,
.register-wrap,
.forgot-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* If .container adds side padding/max-width, neutralise it here */
.container.login-wrap,
.container.register-wrap,
.container.forgot-wrap {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Keep the card readable by giving the card its own margins */
.card {
  margin: 0px !important;
}

.container {
	padding: 0 !important;
}

.login-hero {
	padding: 30px;
}

}