Motivation

• Show the most recent five snapshots on a DJ detail page and ensure their visual order matches breakpoint expectations.
• On small screens the newest snapshot should appear first (top); on large screens the visual flow should run right-to-left so the newest appears on the right.
• Keep card content readable (text remains left-to-right) while flipping the visual ordering of the grid.

Description

• Limit DJ detail page snapshots to the five most recent items by adding {% set recentSnapshots = author.items | reverse | slice(0, 5) %} in src/dj/authors.njk and iterate over recentSnapshots.
• Add a snapshot-grid class to the snapshot list: <ul class="tdbc-column-container snapshot-grid">.
• Add .snapshot-grid rules to src/css/_layout.scss that set direction: ltr by default and switch to direction: rtl at @media (min-width: 80ch) so the grid visually flows right-to-left on larger viewports. Ensure child cards keep direction: ltr so text remains readable.

Testing

• Ran npx eleventy to build the site; the build completed and pages were written (succeeded).
• Invoked the site server via npm start (which runs Eleventy in serve mode); the server started (succeeded).
• Attempted an automated Playwright screenshot of the DJ detail page to verify visual ordering, but the browser connection failed (net::ERR_CONNECTION_REFUSED) during the capture (failed).

Codex Task