.contact-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
  align-items: start;
  gap: 20px;
}

.contact-information {
  display: grid;
  gap: 13px;
}

.contact-information-card,
.contact-form-card {
  padding: 24px;
}

.contact-information-card h2 {
  margin: 17px 0 11px;

  font-size: clamp(28px, 4vw, 43px);
  line-height: 1.05;
}

.contact-information-card p {
  margin: 0;

  color: var(--ddcs-text-soft);

  line-height: 1.75;
}

.contact-detail-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 13px;

  padding: 15px;
}

.contact-detail-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  color: var(--ddcs-lime);
  background: var(--ddcs-lime-soft);

  font-weight: 900;
}

.contact-detail-icon.purple {
  color: #d9adff;
  background: var(--ddcs-purple-soft);
}

.contact-detail-card strong,
.contact-detail-card span {
  display: block;
}

.contact-detail-card strong {
  font-size: 11px;
}

.contact-detail-card span {
  margin-top: 5px;

  color: var(--ddcs-text-muted);

  font-size: 9px;
  line-height: 1.55;
}

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

.contact-form-card {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.22);
}

.contact-form-message {
  padding: 13px 14px;

  border: 1px solid rgba(182, 255, 0, 0.22);
  border-radius: 11px;

  color: var(--ddcs-lime);
  background: rgba(182, 255, 0, 0.06);

  font-size: 10px;
  line-height: 1.55;
}

.contact-form-message.error {
  border-color: rgba(255, 82, 82, 0.28);

  color: #ff9393;
  background: rgba(255, 82, 82, 0.07);
}

.contact-form .ddcs-button {
  justify-self: start;
}

@media (max-width: 880px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .contact-information-card,
  .contact-form-card {
    padding: 20px;
  }

  .contact-form .ddcs-button {
    width: 100%;
  }
}