@media screen and (max-width: 600px) {
  html,
  body {
    background: var(--primary);
  }

  .main {
    width: 100%;
    flex-wrap: wrap;
    overflow-y: auto;
  }

  .logo-container img {
    margin-right: 0;
  }

  .lc-page-heading {
    margin-top: 2rem;
  }

  .logo-container a:hover,
  .logo-container a:focus {
    scale: 1;
    border-color: var(--pink);
  }

  .form-control {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

@media screen and (max-width: 576px) {
  .lc-page-heading {
    font-size: 2.5rem;
    margin-top: 0.5rem;
  }
  .logo-container {
    margin-bottom: 0.5rem;
  }
}

@media screen and (max-width: 400px) {
  .lc-page-heading {
    font-size: 2rem;
  }

  .form-control {
    font-size: 0.9rem;
  }

  .lc-login-btn,
  a.lc-btn-continue {
    height: 60px;
    width: 60px;
  }

  .wrapper .logo-container img {
    max-width: 120px;
  }
}