My header seems to randomly break and the text overlaps the image on the header on certain screen resolutions, see screenshot. This screenshot was on iMac 27-inch (51120 x 2880) on Firefox. Yet when I access the website on Chrome, using the same machine, it looks fine.
This is happening because you have the ‘Hero Image’ element set to Absolute. Therefore the ‘Hero Intro’ is responsively positioned relative to the viewport (larger viewport → things get funky)
Try wrapping all the Hero elements together and then center the ‘Wrapper’ element
You’ll have to play around with the positioning of elements on each viewport size to get it looking consistent.