section.login {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-size: cover;
    padding: 7rem 2rem;
    flex: 1;
    background-color: var(--branco-2);
  }
  
  section.login .login-container {
    display: flex;
    flex-flow: column;
    padding: 5rem;
    align-items: stretch;
    gap: 3rem;
    border-radius: 0.5rem;
    width: 100%; /* Adicionado para responsividade */
    max-width: 60rem; /* Limite máximo para manter o layout */
  }
  
  section.login .login-container h1 {
    color: var(--respira-verde);
    text-align: center;
    font-size: 6rem;
  }
  
  section.login .login-container form {
    display: flex;
    flex-flow: column;
    gap: 1rem;
  }
  
  section.login .login-container form .form-group {
    display: flex;
    flex-flow: column;
    gap: 0.5rem;
  }
  
  section.login .login-container form .form-group label {
    color: var(--preto-2);
  }
  
  section.login .login-container form .form-group input {
    border-radius: 1rem;
    padding: 2rem;
    font-size: 2rem;
    border: solid 0.1rem var(--preto-1);
    width: 100%; /* Alterado de 60rem para responsividade */
    color: var(--preto-1);
  }
  
  section.login .login-container form .form-group input:focus {
    border: solid 0.1rem var(--respira-verde3);
    outline: solid 0.1rem var(--respira-verde3);
  }
  
  section.login .login-container form .submit-button {
    font-size: 2.5rem;
    padding: 1rem 4rem;
    margin-top: 3rem;
    border-radius: 3rem;
    background-color: var(--respira-verde3);
    color: var(--branco-2);
    align-self: center;
  }
  
  section.login .login-container form .submit-button:hover {
    background-color: var(--respira-verde5);
  }
  
  section.login .login-container form .register-paragraph {
    color: var(--preto-2);
    font-size: 1.8rem;
  }
  
  section.login .login-container form .register-paragraph a {
    text-decoration: none;
    color: var(--respira-verde3);
  }
  
  section.login .login-container form .register-paragraph a:hover {
    text-decoration: underline;
    color: var(--respira-verde5);
  }
  
  section.login .login-container form .error-message {
    color: var(--vermelho-0); /* Cor vermelha para erro */
    font-size: 1.6rem;
    margin-top: 0.5rem;
  }
  /* Media Query para telas até 768px */
  @media (max-width: 768px) {
    section.login {
      gap: 3rem;
      padding: 5rem 2rem;
    }
  
    section.login .login-container {
      padding: 3rem;
    }
  }
  
  /* Media Query para telas até 480px */
  @media (max-width: 480px) {
    section.login {
      padding: 4rem 1rem;
    }
  
    section.login .login-container {
      padding: 2.5rem;
      max-width: 90%;
    }
  
    section.login .login-container h1 {
      font-size: 2.5rem;
    }
  
    section.login .login-container form .form-group input {
      font-size: 1.5rem;
      padding: 1.2rem;
    }
  
    section.login .login-container form .submit-button {
      font-size: 1.5rem;
      padding: 1.2rem;
    }
  }