.contacto-component {
  width: 100%;
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  grid-template-rows: auto;
}
.col1,
.col2 {
  width: 100%;
  position: relative;
  padding: 8rem 10% 20% 10%;
}
.col1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.col1-bg-img {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.contact-data {
  display: block;
  position: relative;
  z-index: 2;
  padding: 2.5rem;
  background: url(/images/contact/paper.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.contact-data p {
  font-size: var(--fs-7);
}
.contact-data img {
  width: 80%;
}

/*col2*/
.form-grafico {
  position: absolute;
  right: 0px;
  top: 0px;
  height: 100%;
  z-index: 1;
}

/*form*/
.form-wrapper {
  width: 100%;
  display: block;
  position: relative;
  z-index: 2;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: none;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field.full {
  grid-column: 1 / -1;
}
label {
  font-size: var(--fs-4);
  font-family: "Basis";
  font-weight: 500;
  color: #333333;
}
input,
textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  outline: none;
  font-size: var(--fs-3);
  font-family: "Basis";
  font-weight: 300;
  color: #333333;
}
input:focus,
textarea:focus {
  border-color: rgba(0, 0, 0, 0.35);
}
.btn-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  grid-column: 1 / -1;
}
.btn-submit {
  padding: 14px 18px;
  border: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.25));
  border-radius: 0.25rem;
  background: #dcd9ca;
  width: 70%;
  font-family: "Bavaria Gates";
  font-size: var(--fs-6);
  transition: var(--animTransition);
}
.btn-submit:hover {
  background-color: var(--dark-brown);
  color: white;
  filter: drop-shadow(0 0px 0px rgba(0, 0, 0, 0.25));
}
@media (max-width: 767px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .contacto-component {
    grid-template-columns: 1fr;
  }
  .col1,
  .col2 {
    width: 100%;
    position: relative;
    padding: 4rem 1.5rem;
  }
  .col1 {
    padding-top: 7rem !important;
  }
}