Move PictureLayout to grid

[frederickobrien]

Continuing on my grid rampage of #1542, #16119, and #16133 this absorbs PictureLayout into the new grid system for content pages. This one's a smidge more involved due to the avatar pics that sometimes render (though cracking that here paves the way for CommentLayout to move over too).

Screenshots

Before	After

[github-actions]

Deploy build 30150 of dotcom:rendering-all to CODE

All deployment options

• Deploy build 30150 of dotcom:rendering-all to CODE
• Deploy parts of build 30150 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[github-actions]

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

[github-actions]

Deploy build 2838 of dotcom:ab-testing to CODE

All deployment options

• Deploy build 2838 of dotcom:ab-testing to CODE
• Deploy parts of build 2838 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[JamieB-gu]

Overall approach looks good. Comments mostly about application of CSS and the grid rules.

[JamieB-gu]

I think you're asking this element to span both columns here, then on the element inside it you're setting a max-width to ensure it's essentially the same width as the centre column? Would it be easier to just set grid.column.centre here (which I think is the default) and remove that max-width, or am I missing something about the design?

[frederickobrien]

It's my attempt to handle the existing appearance where the grid section as a whole spans all the way to the end of the right column, but the headline itself doesn't. E.g.

[akash1810]

Please rebase this branch against main before deploying to CODE. #16321 made some changes to CI and infrastructure. Deploying this branch without these changes present will either:

• Fail when using Riff-Raff's default update strategy
• OR delete the new infrastructure if using Riff-Raff's "dangerous" mode

Please rebase this branch against main before deploying to CODE.

[Jakeii]

There appear to be some unintentional differences now:
This PR:

prod:

[frederickobrien]

This keeps parity with the Chromatic tests though I'd argue it's better for this to be consistent

[frederickobrien]

There appear to be some unintentional differences now: This PR:

prod:

I think I've addressed these as part of some rebasing and polishing. There are a handful of Chromatic changes now but I think they're preferable if that makes sense?

[Jakeii]

There appear to be some unintentional differences now: This PR:
prod:

I think I've addressed these as part of some rebasing and polishing. There are a handful of Chromatic changes now but I think they're preferable if that makes sense?

Could you add a story for the case I found perhaps? Also have you done any other manual testing? As clearly the stories aren't exhaustive!