Fix issue with hero image causing horizontal scroll

[jonkafton]

What are the relevant tickets?

N/A

Description (What does it do?)

Issue in production where the Hero image causes overflow to the right of its container causing the page to be horizontally scrollable. To replicate, reduce your screen width to <1365px and scroll left:

By design the image is translated right by 48px so is cropped right on the page. With this fix:

We could add an overflow: hidden to its container, though the issue is that the image scales and at larger screen widths we want to see the whole image, otherwise it looks like this:

This fix add a media breakpoint so that the image displays in full at larger widths, but has overflow hidden where it would interfere with the page margins.

Open to a better solution with the css, or an update to the design where the image is not translated right (not sure how intentional this was), which looks like:

Screenshots (if appropriate):

• Desktop screenshots
• Mobile width screenshots

How can this be tested?

The homepage should not be scrollable at all screen widths and the hero image should display correctly.

[shanbady]

looks good 👍