.contacts-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 2.6em;
  align-items: start;
}
.contact-card {
  position: relative;
  background: linear-gradient(160deg, #262019, var(--ink) 60%);
  border-radius: var(--radius);
  padding: 2.6em;
  display: flex;
  flex-direction: column;
  gap: 2em;
  overflow: hidden;
  box-shadow:
    0 24px 48px rgba(32, 29, 24, 0.16),
    0 2px 8px rgba(32, 29, 24, 0.08);
}
.contact-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);
}
.contact-card-item {
  display: flex;
  gap: 1.2em;
  align-items: flex-start;
}
.contact-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--accent), #083a70);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 8px 18px rgba(15, 83, 158, 0.35);
}
.contact-icon svg {
  width: 20px;
  height: 20px;
}
.contact-card-item h3 {
  color: var(--bg);
  font-size: 1.1rem;
  margin-bottom: 0.3em;
}
.contact-card-item h3 a {
  color: inherit;
  transition: color 0.25s var(--ease);
}
.contact-card-item h3 a:hover {
  color: var(--accent-soft);
}
.contact-card-item p {
  color: rgba(247, 244, 238, 0.68);
  font-size: 0.88rem;
  margin-bottom: 0;
}
.contact-social {
  margin-top: 0.6em;
  gap: 0.7em;
}

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