.contact-card__content {
  display: grid;
  gap: clamp(24px, 4vw, 42px);
}

.contact-card__image {
  height: 100%;
  min-height: 280px;
  object-position: 48% 50%;
}

.contact-form {
  display: grid;
  gap: 16px;
}

.contact-field {
  display: grid;
  gap: 7px;
}

.contact-field__label {
  color: #0f172a;
  font-size: 0.9rem;
  font-weight: 800;
}

.contact-field__control {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 12px 13px;
  background: #fbfdff;
  color: #0f172a;
  font: inherit;
  line-height: 1.4;
}

.contact-field__control--multiline {
  min-height: 150px;
  resize: vertical;
}

.contact-field__hint {
  margin: -3px 0 0;
  color: #64748b;
  font-size: 0.86rem;
  line-height: 1.45;
}

.contact-field__control:focus {
  border-color: #0f6f8f;
  outline: 3px solid rgba(15, 111, 143, 0.16);
  background: #ffffff;
}

.contact-form__status {
  margin: -2px 0 0;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.5;
}

.contact-form__status--success {
  color: #15803d;
}

.contact-form__status--error {
  color: #b91c1c;
}

@media (min-width: 820px) {
  .contact-card {
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.65fr);
  }
}

@media (max-width: 560px) {
  .contact-card__image {
    min-height: 210px;
    max-height: 280px;
  }
}