.contact {
  .contact__grid {
    gap: 40px;
    display: grid;

    @media (min-width: 1024px) {
      gap: 20px;
      grid-template-columns: 1fr 1fr;
    }
  }

  .contact__grid-image {
    .image-container {
      aspect-ratio: 9/10;
    }
  }
  .contact__grid-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    @media (min-width: 1024px) {
      padding-right: 40px;
    }

    form {
      width: 100%;

      input,select,input::placeholder, textarea, textarea::placeholder {
        font-size: 12px;
        line-height: 1.4;
      }
    }
  }
}

.contact img {
  max-width: 100%;
}

.contact .form__message {
  align-items: flex-start;
}

.contact .icon-success {
  margin-top: -2px;
}

.contact .field {
  margin-bottom: 1.5rem;
}

@media screen and (min-width: 750px) {
  .contact .field {
    margin-bottom: 2rem;
  }
}

.contact__button {
  margin-top: 3rem;
}

@media screen and (min-width: 750px) {
  .contact__button {
    margin-top: 4rem;
  }
}

@media screen and (min-width: 750px) {
  .contact__fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 2rem;
  }
}