LCP issue with page-hero grid-container grid-paren

Hey Guys

My header hero image was getting flagged for LCP on Page Speed Insights (on mobile only, desktop scores ok)

due to: div class="page-hero grid-container grid-parent

I have read through the existing topics and applied the last PHP snippet suggested by David in this topic:

https://generatepress.com/forums/topic/cls-and-lcp-issues/page/2/

That kinda worked... but...

Instead, the hero image of the first 'main post' gets merged into the header hero image (on mobile only)

I have disabled the snippet, for now, to get the hero header back on mobile

Can you please take a look and advise?

To confess, I am not that confident I set up the header hero image correctly as the only way I could display it was to add 140 padding top and bottom to the desktop version. I did not need to add padding to the mobile.

Here are the settings (happy to alter as needed)

container: contained
Inner Container: contained
Horizontal Allignment: center
padding: 140 top 140 bottom (desktop only)
background image: custom
background position center center
the rest is default

Finally, would the 'background' module not allow me to more easily display a hero image on the home page? I find the 'element' method a bit fiddly (sorry am not too techie) and just want an easy way to add a hero image to the home page only.

Cheers guys, brilliant theme btw!