<!-- source-hash: 6c49039417df243ab2c6d3b41c998928 -->
A client-side React component that renders a responsive grid of feature cards with configurable layouts, borders, backgrounds, icons, and status badges.

## Key Components

### Interfaces
- **`FeatureCardItem`** — Defines individual card data: icon, title, badge, content, and per-card style overrides (`removeAllBorders`, `noBackground`, `customBackground`)
- **`FeatureCardGridProps`** — Grid-level configuration: items array, column count, class overrides, border/background/gap controls

### Exports
- **`FeatureCardGrid`** — Main component rendering a `Card` wrapper with a responsive CSS grid, dynamically computing row/column borders and applying per-item style overrides

## Usage Example

```typescript
import { FeatureCardGrid, FeatureCardItem } from './feature-card';
import { ShieldIcon } from 'lucide-react';

const items: FeatureCardItem[] = [
  {
    icon: ShieldIcon,
    iconColor: '#FFC008',
    title: 'Automated Patching',
    badge: { text: 'New', colorScheme: 'green' },
    content: <p>Keep endpoints secure with zero-touch patch management.</p>,
  },
  {
    title: 'AI Triage',
    content: <p>Mingo AI resolves tickets before a technician is needed.</p>,
    noBackground: true,
  },
];

export default function Page() {
  return (
    <FeatureCardGrid
      items={items}
      columns={2}
      cardGap="gap-6"
      showBorders={true}
      roundedCorners={true}
    />
  );
}
```

## Notes

- Border logic is **responsive-aware**: right borders are hidden on mobile (single column) and shown on desktop only where appropriate
- When **all items** share `noBackground` or `removeAllBorders`, the outer `Card` container is also updated to match, avoiding visual inconsistencies
- `content` accepts any `React.ReactNode`, making cards fully composable for marketing pages, feature showcases, or dashboard layouts