/* ─────────────────────────────────────────────────────────────────
   block-features — multi-card feature grid (icon + title + text)
   Card surface, hover, and image radius inherit from design-system.css
   (.section .card / .ds-image). Only block-unique layout below.
   ───────────────────────────────────────────────────────────── */

.block-features .card-body .d-flex {
  align-items: flex-start;
  gap: var(--ds-space-3);
}

/* Small inline icon (40px square) — kept here because it's NOT a photo
   and doesn't fit the .ds-image aspect-ratio system. */
.block-features .card img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.block-features .card h3,
.block-features .card a.h3 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-sm);
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--scheme-card-fg);
  margin: 0 0 var(--ds-space-2) 0;
  line-height: 1.15;
  text-decoration: none;
  text-transform: uppercase;
}

.block-features .card a.h3 {
  transition: color var(--ds-duration-fast) var(--ds-ease-out);
}

.block-features .card a.h3:hover {
  color: var(--ds-cta);
}

.block-features .card p {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  line-height: 1.6;
  color: var(--scheme-fg-soft);
  margin: 0;
}

@media (max-width: 600px) {
  .block-features .card img { width: 36px; height: 36px; }
}