section#contact {
  max-width: 1200px;
  margin: 150px auto;
  padding: 60px 64px 11px 97px;
}

section#contact h2 {
  font-family: Inter, sans-serif;
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  color: black;
  margin-bottom: 100px;
}

section#contact h2 > span {
  display: block; /* Necessary for animation to work in Edge */
}

section#contact .contact-form {
  display: grid;
  grid-template-areas:
    "form paragraph"
    "form contact";
  grid-template-rows: max-content auto;
  display: -ms-grid;
  -ms-grid-rows: max-content auto;
  font-family: Lato, sans-serif;
  font-size: 26px;
  line-height: 1.52;
  color: #747474;
}

section#contact .contact-form p {
  grid-area: paragraph;
  -ms-grid-column: 2;
  -ms-grid-row: 1;
  margin-bottom: 50px;
}

section#contact .contact-form .contact-details {
  grid-area: contact;
  -ms-grid-column: 2;
  -ms-grid-row: 2;
}
section#contact .contact-form .contact-details .copy {
  color: #6832DD;
}
section#contact .contact-form .contact-details .copy > span {
  margin-right: 20px;
}

section#contact .contact-form form {
  grid-area: form;
  -ms-grid-column: 1;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  display: flex;
  flex-direction: column;
  margin-right: 84px;
  min-width: 300px;
}
section#contact .contact-form form .field {
  display: flex;
  flex-direction: column;
}
section#contact .contact-form form label {
  margin-bottom: 12px;
  margin-left: 2px;
  font-size: 14px;
  color: #909090;
}
section#contact .contact-form form textarea,
section#contact .contact-form form input {
  padding: 10px;
  font-size: 16px;
  border-radius: 4px;
  background-color: #f0f0f0;
  margin-bottom: 20px;
}
section#contact .contact-form form textarea[disabled],
section#contact .contact-form form input[disabled] {
  background-color: lightgrey;
}
section#contact .contact-form form button {
  border-radius: 4px;
  background-color: #6832DD;
  padding: 9px;
  color: white;
  font-size: 18px;
  font-family: Lato, sans-serif;
  font-weight: bold;
}
section#contact .contact-form form button:hover {
  box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.1);
  transform: translateY(-1px);
}
section#contact .contact-form form button[disabled] {
  box-shadow: none;
  transform: none;
  background-color: grey;
  cursor: wait;
}
section#contact .contact-form form .message {
  font-size: 1rem;
  border-radius: 4px;
  background-color: lightgrey;
  margin-top: 20px;
  padding: 10px 15px;
}
section#contact .contact-form form .message.success {
  background-color: #6832DD;
  color: white;
}

@media screen and (max-width: 900px) {
  section#contact {
    padding: 100px 20px 130px;
  }
  section#contact h2 {
    font-size: 41px;
    margin-bottom: 38px;
  }
  section#contact .contact-form p {
    font-size: 17px;
  }
  section#contact .contact-form {
    display: block;
  }
  section#contact .contact-form form {
    margin: 0 0 34px;
    min-width: auto;
  }
}