Issue with mobile scaling of Markdown text block and banner image

Site URL: https://gregorylassale.com

I just redesigned my top page which is now large banner image which includes Markdown text blocks. As you can see on the screenshot below, the top Markdown block and the background image do not scale well on mobile.  

What would be the best way to fix those two issues? For the text, I don't know if just modifying the padding on mobile is the best option. I think it might be better to decrease the font size for mobile. The current Markdown code in that block is

<div style="color:white; text-align:center; font-size:4.5em">GREGORY LASSALE</div>

For the background image, I'm thinking thinking resized versions of the same image, but not sure what other options there are. The affected pages are:

https://gregorylassale.com/english

https://gregorylassale.com/french

Thanks in advance for the help.

Following up on this.

Reducing the padding to 0 for the title block didn't fix the problem at all, while reducing the font size didn't yield very good results. It looks ok in portrait mode, but too small in landscape mode (iPad Pro 11). I set the max width at 1668px (iPad Pro 11's portrait width pic count), but the font stayed the same size in landscape mode. Does anyone have a workaround? I'd be fine with having the title on two lines on mobile phones and tablet portrait mode as long as they don't overlap.

Any help much appreciated. 

Hi. Can you enable right click? We can check easier

Please desiregard.

I fixed the issue by creating a alternate versions of the homepage for tablets and phones and decreasing the font size.

Can you tell me how you created the multiple versions for the mobile and tablet views?