.contacts-grid {
  padding-block: 0;
  border-block: 1px solid var(--color-border-strong);
  background: var(--color-surface-dark);
  color: var(--color-on-accent);
}

.contacts-grid__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin-inline: var(--space-contact-grid-outset);
  background: var(--color-border-subtle);
}

.contacts-grid__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-lg);
  min-width: 0;
  min-height: var(--size-contact-card);
  padding: var(--space-lg);
  background: var(--color-surface-dark);
}

.contacts-grid__icon {
  display: block;
  flex: none;
  width: var(--size-direction-icon);
  height: var(--size-direction-icon);
}
.contacts-grid__icon svg { width: 100%; height: 100%; }

.contacts-grid__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}
.contacts-grid__title,
.contacts-grid__value { margin: 0; overflow-wrap: anywhere; }
.contacts-grid__title {
  font-size: var(--fs-transport-card-title);
  font-weight: 274;
  line-height: var(--lh-description);
  letter-spacing: -.03em;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.contacts-grid__value {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  letter-spacing: -.03em;
  text-decoration: none;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.contacts-grid__value--underlined { text-decoration: underline; text-underline-offset: .15em; }
.contacts-grid__value:is(a):hover { color: var(--color-on-accent); }

@media (width < 64rem) {
  .contacts-grid__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (width <= 48rem) {
  .contacts-grid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: var(--container-gutter); }
  .contacts-grid__card { min-height: 12rem; padding: var(--space-sm); }
  .contacts-grid__icon { width: var(--size-touch); height: var(--size-touch); }
  .contacts-grid__body { gap: var(--space-sm); }
  .contacts-grid__title { font-size: var(--fs-body-large); }
}