Write a before-and-after comparison block layout

I want to showcase a kitchen renovation on our services page: one photo of the
kitchen before the remodel, one after, side by side, for three different
projects.

Project 1: before-kitchen-oak-st.jpg, after-kitchen-oak-st.jpg, "Oak Street
kitchen remodel"
Project 2: before-bath-maple.jpg, after-bath-maple.jpg, "Maple Ave bathroom
remodel"
Project 3: before-deck-birch.jpg, after-deck-birch.jpg, "Birch Lane deck rebuild"

[replace with your own project names and before/after image pairs]

Core Gutenberg has no native slider or reveal block, so build this as a clear
static side-by-side layout rather than faking a slider with custom HTML that
will likely break on the next theme update:

1. For each project, use a `wp:group` with a `wp:heading` (the project name) on
   top, then a `wp:columns` block with two equal columns, one image each.
2. Label each image explicitly with a visible text caption, "Before" and "After",
   directly above or below each photo, don't rely on a colored border (red for
   before, green for after) as the only distinguishing signal, that fails for
   colorblind visitors and for anyone using a screen reader.
3. Write alt text that describes the actual state shown, not the word "before" or
   "after" itself: something like "Kitchen before remodel, original oak cabinets
   and laminate counters" and "Kitchen after remodel, white shaker cabinets and
   quartz counters." The visible caption says before/after, the alt text should
   say what's actually different in the photo.
4. Keep the same camera angle and framing between each before/after pair if the
   source photos allow it, mismatched angles make the comparison confusing
   regardless of how the blocks are labeled, flag any pair where the angles don't
   match so someone can reshoot or crop.
5. Repeat the group-with-two-columns structure for all three projects, stacked
   vertically down the page.
6. Output the complete markup for all three projects.