# Linked visuals

A section with an optional heading and a row of visuals (from Other media) with arrow separators between them. Use for process steps or linked media.

## What it looks like

- **Default:** Heading (h2, text-primary-blue, centered), then a grid of 1–3 columns (laptop: 3 cols). Each item: ResponsiveVisual (image/video) and, except for the last, an arrow (blue triangle). Vertical gap 12/16; section has `noBackground`.
- **Heading only:** Heading only; no visuals when otherMedia is empty.
- **Two or three visuals:** Same layout with 2 or 3 items and arrows between.

## Typography

- **Heading:** Typography from sizing (h2 when not first block); class includes `text-primary-blue text-center`. Semantic: first block → `<h1>`, else `<h2>`.

## Colours

**How colours are applied:** Section uses `noBackground`. No `backgroundColour` or `textColour` in used fields. Heading uses fixed `text-primary-blue`. Arrow is fixed blue.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| `heading` | Symbol | Title above visuals (h2, centered) | No heading |
| `otherMedia` | Array | List of visuals with arrows between | No visuals; only heading if present |
| `anchor` | Symbol | HTML `id` for in-page linking | No anchor |
| `cmsLabel` | Symbol | Internal/analytics label | No visible effect |

## Behaviour

- **Position (index):** First block → heading `<h1>`; otherwise `<h2>`. Embedded: h3/h4.
- **Layout:** Grid `grid-cols-1 laptop:grid-cols-3`, each cell flex column/row with gap-8. Visuals use `calculateVisualSizes(1, { laptop: 0.33 })`.
- **Arrows:** Arrow SVG between items, hidden after the last visual.

## Impact of content changes

| Change | Result |
|--------|--------|
| Add/remove heading | Heading appears or disappears |
| Add/remove otherMedia items | Number of visuals and arrows updates (1–3 typical) |

## Screenshots to capture

Recommended variants: default (heading + three visuals), two-visuals, heading-only.