.main {
  height: 100svh;
  display: flex;
  flex-direction: column;
  background-color: var(--gray-97);
  padding-top: min(100px, 15%);
}

.section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  h2 {
    color: #595a5c;
    font-size: 16px;
  }
  img {
    width: 180px;
    height: auto;
  }
}

.form-container {
  background-color: var(--white-100);
  padding: 2rem 3rem;
  border-radius: 6px;
  border: solid 1px var(--gray-90);
  width: 100%;
  max-width: 450px;
}

.form-container__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em;
}

.form__group {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.4em;
}

.form__label {
  font-size: 14px;
  color: var(--gray-30);
}

.form__input {
  padding: 10px;
  border: 1px solid var(--gray-90);
  border-radius: 8px;
  font-size: 14px;
  &::placeholder {
    color: var(--gray-60);
  }
}

.form__submit {
  width: 100%;
  background-color: var(--miret-blue-36);
  color: var(--white-100);
  padding: 14px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 700;
  transition: background-color 0.2s ease-in-out;
  &:hover {
    background-color: var(--miret-blue-50);
  }
}

.form__input--error {
  outline-style: solid;
  outline-color: var(--red-44);
  outline-width: 1px;
}

.forgot-password-link-container {
  margin-top: 2em;
  text-align: center;
  margin-top: 0.5em;
}