<!-- source-hash: a7601384671770e4376abbdab7aed0bf -->
A React component system for displaying highlighted text cards with categories and responsive grid layouts.

## Key Components

- **`HighlightCard`** - Individual card component with responsive highlight backgrounds and styled category text
- **`HighlightCardGrid`** - Grid container for multiple highlight cards with configurable columns (2 or 3)
- **`HighlightCardItem`** - Interface defining card data structure (category, colors, description)
- **`HighlightCardProps`** - Props interface for individual cards
- **`HighlightCardGridProps`** - Props interface for grid layout configuration

## Usage Example

```typescript
import { HighlightCard, HighlightCardGrid, HighlightCardItem } from './highlight-card';

const highlightItems: HighlightCardItem[] = [
  {
    category: 'data',
    categoryColor: '#3B82F6',
    highlightBg: '#DBEAFE',
    description: 'visualization needs'
  },
  {
    category: 'workflow',
    categoryColor: '#10B981',
    highlightBg: '#D1FAE5',
    description: 'automation solution'
  }
];

// Single card
<HighlightCard item={highlightItems[0]} />

// Grid layout
<HighlightCardGrid 
  items={highlightItems}
  columns={2}
  className="my-8"
/>
```

The component features responsive highlight backgrounds that scale with text length, custom typography using Azeret Mono font, and intelligent border management for grid layouts across mobile and desktop viewports.