.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 1.0)), url("../assets/images/hero/small/hero-contact-s.webp");

  @media only screen and (min-width: 824px) {
      background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 1.0)), url("../assets/images/hero/large/hero-contact-l.webp");
  }
}


#contact-form {
  border-radius: 4px;
  background-color: var(--color-background);

}

/* contact form elements*/

input, select, textarea {
  width: 100%;
  padding: 1rem;
  border: 1px solid var(--color-text);
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 0.5rem;
  margin-bottom: 2rem;
  resize: vertical;
  display: block;
  font-weight: var(--font-weight);

  &.button-cta {
    width: fit-content;
    padding: 0.5em;
    cursor: pointer;
  }
}

label {
  color: var(--color-text); /* Gray border */

}

@media only screen and (min-width: 576px) {

  input, select, textarea {
    width: 75%;
  
  }

}

@media only screen and (min-width: 824px) {

  input, select, textarea {
    width:50%;
  }

}