fix: #3607228 Match the delivery cards' reading order to their visual order
The four how-we-deliver cards render as a correct 2x2 grid, but a screen reader (or any text-only read of the page) hits them in column-major order — card 1, then card 3, then card 2, then card 4 — because the underlying layout was one section with two columns, each column holding two cards stacked. Document order always follows physical slot, so stacking two cards per column can never produce row-major reading order no matter how the tree is written.
Fix: two sibling sections (each 50-50, one card per column) instead of one section with two cards per column, with the same 32px spacer now sitting between the two row-sections rather than duplicated inside each column. Same inputs on both new sections as the section they replace, so width, gutter, padding and tint are unchanged.
Verified on a fresh browser install: visual layout is pixel-identical to before (32px between rows, 24px across, same tiles and tints) — screenshot in this MR's discussion — and DOM order now matches visual order card 1, 2, 3, 4.
AI-Generated: Yes
Checkpoints:
- File an issue
- Addition/Change/Update/Fix
- Testing to ensure no regression
- Automated unit testing coverage
- Automated functional testing coverage
- UX/UI designer responsibilities
- Readability
- Accessibility
- Performance
- Security
- Developer Documentation
- User Guide Documentation
- Reviewed by human
- Code review by maintainers
- Full testing and approval
- Credit contributors
- Review with the product owner
- Release notes snippet
- Release