.form {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, auto);
  justify-content: start;
  justify-items: start;
  align-content: center;
  align-items: center;
  gap: 2.4rem;
  width: 100%;
}

@media (min-width: 768px) {
  .form {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
    column-gap: 4.8rem;
    row-gap: 2.4rem;
  }
}

@media (min-width: 1280px) {
  .form {
    margin-top: 7.2rem;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.2rem;
  width: 100%;
}

@media (min-width: 768px) {
  .form-group-message {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

.form-label {
  font-family: "Geist", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--black);
  padding-left: 2.4rem;
}

.form-input {
  width: 100%;
  padding: 1.2rem 2.4rem;
  border: 0.2rem solid var(--medium-grey);
  border-radius: 100rem;
  font-family: "Geist", sans-serif;
  font-size: 1.6rem;
  background-color: var(--white);
  font-weight: 400;
  color: var(--black);
}

.form-input-message {
  resize: vertical;
  min-height: 24rem;
  border-radius: 2.4rem;
}

.form-error {
  margin: 0;
  min-height: 1.8rem;
  font-family: "Geist", sans-serif;
  font-size: 1.4rem;
  line-height: 1.4;
  color: #b3261e;
}

.form-input.is-invalid {
  border-color: #b3261e;
}

@media (min-width: 768px) {
  .form-input-message {
    min-height: 16rem;
  }
}