Update Scrollable Highlights scroll behaviour at large screens

[domlander]

What does this change?

• Updates the scroll padding value on left-col & wide for better alignment.
• Moves the spacing to align the highlights content with the rest of the page content from the first card to the container.
• Refactors HighlightsCardImage into its own component.

Why?

• Refactor ScrollableHighlights before making colour changes in upcoming PR.

Screenshots

Scroll behaviour is now more predictable

Before

Wide

Screen.Recording.2025-07-31.at.10.57.30.mov

Left-col

Screen.Recording.2025-07-31.at.11.01.44.mov

### After

Wide

Screen.Recording.2025-07-31.at.10.59.07.mov

Left-col

Screen.Recording.2025-07-31.at.11.02.49.mov

[github-actions]

Deploy build 44179 of Mobile::mobile-apps-rendering to CODE

All deployment options

• Deploy build 44179 of Mobile::mobile-apps-rendering to CODE
• Deploy parts of build 44179 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[github-actions]

Deploy build 19954 of dotcom:rendering-all to CODE

All deployment options

• Deploy build 19954 of dotcom:rendering-all to CODE
• Deploy parts of build 19954 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.

[prout-bot]

Seen on PROD (merged by @domlander 10 minutes and 4 seconds ago) Please check your changes!