main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--light-grey);
  padding: var(--section-padding);
  margin-top: 0 !important;
}

.login-container {
  background: var(--white);
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  width: 100%;

  display: grid;
  gap: var(--g2-gap);
}
.login-container-header {
  display: grid;
  gap: var(--g1-gap);
  justify-content: center;
}
.login-container-header-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-container-header-logo img {
  height: 4rem;
}

.login-inputs-container {
  display: grid;
  gap: var(--g2-gap);
}
.login-inputs-container h1 {
  font-size: var(--h3-size);
  text-align: center;
}

.input-container {
  display: grid;
  gap: var(--g1-gap);
}
input {
  width: 100%;
  padding: 0.85rem;
  border: 1px solid var(--dark-grey);
  border-radius: 0.625rem;
  font-family: inherit;
  font-size: var(--small-size);
  transition: all 0.15s ease-in;
  resize: none;
}
input::placeholder {
  color: var(--dark-grey);
}
input:focus {
  outline: none;
  border-color: var(--dark-green);
}

.login-button {
  width: 100%;
  border-radius: 0.625rem;
  border: none;
  padding: 0.85rem;
  font-family: inherit;
  font-weight: 600;

  display: flex;
  justify-content: center;
}
.login-button.loading {
  opacity: 0.8;
  pointer-events: none;
  cursor: not-allowed;
  gap: var(--g1-gap);
}

.error-message {
  display: none;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--dark-red);
  text-align: start;
}
.login-error-message {
  text-align: center;
}
.login-error-message.show {
  display: block;
}

/* Tablet */
@media (min-width: 768px) {
  .login-container-header-logo img {
    height: 5rem;
  }
  .login-container {
    margin: 0 auto;
    width: 65%;
  }

  .error-message {
    font-size: 0.835rem;
  }
}

/* Laptop / Desktop */
@media (min-width: 1024px) {
  .login-container-header-logo img {
    height: 6rem;
  }
  .login-container {
    margin: 0 auto;
    width: 35%;
  }

  .error-message {
    font-size: 0.885rem;
  }
}