Moving image background position for mobile only - Royce template

Site URL: https://hen-apple-ebec.squarespace.com/

Hi guys,

Please view my website on https://hen-apple-ebec.squarespace.com using the password " Amp3d " . Please then navigate through to "About", "Services" or "Work" pages. You'll see the image backgrounds work quite well on Desktop size. If you then change it to mobile display though, you'll see my problem.

The images are cropping in a weird way that maek it hard to see the focus of the image - the text, for example, on "About". If I was able to create some CSS that would move down the background image on mobile display ONLY (thus vertically centring my image on the text), this would be the perfect fix to my issue. I have set "Focal Point" correctly in the Squarespace setting but it doesn't seem to work on mobile. 

I would greatly appreciate your kind assistance on achieving this background position movement, as I think this will fix my issue.

Thank you!