# Related Use Cases Content

## Essence

Card surface for the `Related Use Cases` block.

## Internal Rules

- Use only inside `Related Use Cases`.
- Uses Block Compact spacing for the related-card surface.
- Grid gap follows card-grid rhythm: `--space-4` by default and `--space-3` on mobile.
- Shows up to four related use-cases by default.
- Accepts `limit` from `Related Use Cases`; index-page groups can pass their full group size.
- Uses one column on Mobile, two columns on Tablet, and four columns on Desktop and Ultra-wide.
- Preview breakpoint switching must mirror the real responsive grid.
- Owns the gray background and gradient fade.
- Uses `Use Case Item` with `state="small"` for each related item.
- Passes only content data and approved public props into `Use Case Item`.
- Must preserve content-owned visual metadata such as `visualKey`; this is use-case content data, not a parent override.
- Must not pass local CSS, image source overrides, or other child-internal visual controls into `Use Case Item`.
- The visual inside each related tile belongs to `Use Case Item`; this parent consumes the child as-is.
- Does not render the section title or follow-up action.

## Code Paths

- `packages/design-system/src/components/RelatedUseCasesContent.astro`