.section-1 {
  background-color: var(--distant-green) !important;
}
.contact-page-header {
  display: grid;
  gap: var(--g2-gap);
}
.contact-page-header h1, .contact-page-header p {
  text-align: center;
}

.contact-form-container {
  display: grid;
  gap: var(--g4-gap);
}
.contact-form-header {
  display: grid;
  gap: var(--g2-gap);
  justify-content: center;
}
.contact-form-header h2 {
  text-align: center;
}

/* WIP Alert */
.wip-alert {
  background-color: var(--distant-green);
  color: var(--black);
  border: 1px solid var(--dark-green);
  padding: var(--g2-gap);
  border-radius: 0.625rem;
  width: 100%;
}

.wip-alert a {
  color: var(--dark-green);
  text-decoration: underline;
  font-weight: 600;
}

.contact-form {
  display: grid;
  gap: 1.5rem;
}
.field {
  display: grid;
  gap: var(--g1-gap);
}

label {
  font-size: var(--small-size);
  font-weight: 600;
  color: var(--black);
  margin-left: 0.35rem;
}
input, textarea {
  padding: 0.85rem;
  border: 1px solid var(--grey);
  border-radius: 0.625rem;
  font-family: inherit;
  font-size: var(--p-size);
  background-color: var(--light-grey);
  transition: all 0.15s ease-in;
  resize: none;
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--dark-green);
  background-color: var(--white);
}
textarea {
  min-height: 120px;
}
.contact-form-submit-button {
  border: none;
}

/* Laptop / Desktop */
@media (min-width: 1024px) {
  .wip-alert {
    width: fit-content;
  }
  .wip-alert a:hover {
    color: var(--vivid-green);
  }
}