# Separated visuals

Side-by-side (or stacked on mobile) **pair** of Media items — for **exactly two** related images/videos with intentional spacing and optional width/position.

## When to use

- **Exactly two** related images or videos that the **design presents as a pair** (before/after, two devices, dual mockups sharing one beat)
- Multi-block path: place as a **sibling** in article `content` **between** Case study / Blog rich text blocks when the source is a true pair
- Legacy single-ART path: may still be **embedded** inside one ART body RTF (live production corpus)

## When not to use

- Two stacked images that are **not** a designed pair → sequential CSRT field visuals (do **not** invent Separated)
- One image → CSRT/ART `visual` or single Media
- Three or more in a grid → **Visuals** collection
- Hero/OG → article `featuredImage` / article `visuals`

## Section fields

| Field | Effect |
|---|---|
| `cmsLabel` | Editor label — use e.g. `LAB \| pair 1` on lab ports |
| `anchor` | Section deep-link id |
| `backgroundColour` | Section chrome |
| `textColour` | Text colour if any chrome text |

## Items (contents)

Collection holds **Media** entries. For each Media:

- Link the asset (image/video)
- Optional `width` / horizontal position for layout balance
- Descriptive `name` (and alt on the asset)
- Decorative demos: autoplay + loop when appropriate

## Colours

Section and/or cards may use `backgroundColour` and `textColour` from the palette.

**Background colours:** Light, Dark, Gray, Orange, Blue, Yellow

**Text colours:** Dark, Light