Feature card

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.feature-card {
  background: var(--card);
  border: 1px solid oklch(0.3 0.02 260);
  border-radius: 0.75rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.feature-card__icon {
  font-size: 2rem;
  line-height: 1;
}

.feature-card__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.feature-card__desc {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 48rem) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

You are a senior frontend engineer building a CSS component library.

Goal: A reusable feature card grid — icon, heading, description — no JavaScript.

Technical constraints:
- Use CSS Grid with repeat(3, 1fr) for the three-column layout.
- Cards use var(--card) background, a subtle oklch() border, border-radius, and padding.
- Use flexbox inside each card (flex-direction: column, gap) for vertical rhythm.
- Use oklch() for all color values, not hex or rgba().
- Include a responsive breakpoint that stacks to a single column below 48rem.

Framework variant (pick one):
A) Vanilla CSS with BEM class names (.feature-card, .feature-card__icon, etc.).
B) React component — accept an array of { icon, title, description } objects as a prop.

Edge cases to handle:
- Cards with long descriptions should not break the grid (use align-items: start on the grid).
- Icon area should not shrink if the heading is long (flex-shrink: 0 on icon).
- Grid gap must use a relative unit, not px, for scalable spacing.

Return HTML and CSS.