<!-- source-hash: 0fcf2c17c123f63f9ecc989146d3d3d7 -->
Renders a responsive 2-row decorative icon grid that fills the viewport width, randomly distributing icons while avoiding adjacent duplicates. Used as a visual background/separator element.

## Key Components

- **`ResponsiveIconsBlock`** — Main exported component that calculates column count from viewport width and renders a grid of icons
- **`IconsBlockProps`** — Interface with optional `loading` boolean to force the placeholder skeleton state
- **`availableIcons`** — Static array of 12 icon components (custom SVGs + Lucide icons) defined outside the component to prevent re-instantiation
- **Seeded pseudo-random layout** — Uses `Date.now()` as a stable seed per mount to deterministically assign icons without adjacent repeats

## Usage Example

```typescript
import { ResponsiveIconsBlock } from './icons-block';

// Standard decorative separator
export default function PageHeader() {
  return (
    <>
      <HeroSection />
      <ResponsiveIconsBlock />
    </>
  );
}

// Force loading skeleton (e.g. while parent data fetches)
export function LoadingLayout() {
  return <ResponsiveIconsBlock loading={true} />;
}
```

## Behavior Notes

| State | Renders |
|---|---|
| `loading={true}` | Pulsing `#2A2A2A` placeholder bar |
| Grid not yet computed | Same placeholder bar |
| Grid ready | Full icon grid |

- Column count recalculates on `window.resize` (`Math.ceil(width / 56) + 4`)
- All icons are forced to a muted gray (`grayscale + brightness` CSS filter) via an injected `<style>` block scoped to `.icons-block`
- Marked `aria-hidden="true"` throughout — purely decorative, no accessibility semantics