Text overlay on a banner background image not displaying in correct location for some browsers when viewed on Apple Retina display desktop/laptop equipment.

Site URL: https://bachcollegiumsd.org/

Your responses appear to be leading the Squarespace developer forums, so I thought I would reach out directly to you. We have a client who approved a design for their index page. This index page has text laid in a specific location within the image. Due to the way the client wanted the video directly underneath to appear, we needed to use a background banner hero image rather than an image block so that the image would span the length of the container. 

As such, getting the overlaid text to place exactly where the owner desires it has been a bit of a challenge.  Using the combination of text boxes and spacers yields unsatisfactory results.  Therefore, we have resorted to the use of CSS position property )fixed) with padding to get the text to lay where the owner desires.  So far, Chrome and Firefox have yielded good results.  We are having some slight issues with Microsoft Edge, but mostly with users of Apple MacBook Pro laptops (particularly the 13" equipment) that are outfitted with their Retina Display who use Chrome as their default browser.  Safari isn't much better.  The Retina resolution is 2560x1600.  

We've been experimenting and adjusting on a "Not Linked" page.  
https://bachcollegiumsd.squarespace.com/config/pages?p

How the sandbox page displays on Firefox (desktop)

How the sandbox page displays on Chrome (desktop/PC)

How the sandbox page displays on Microsoft Edge (desktop)

How the sandbox page displays on Macbook Pro Safari

How the sandbox page displays on Macbook Pro Chrome

The green frames demonstrate where the text should be sitting on the page with the existing hero image on the live production site. What can we do with the CSS to allow Apple Retina desktop/laptop equipment with higher resolution to display the text in the appropriate location (within tolerable allowances)?  

Below is the CSS for the "Season 2020/2021" test effort. 

<div style="position: fixed; top: 55px; left: 635px; font-family: trade-gothic-next-compressed, sans-serif; font-size: 61px; line-height: 0px; color: #f49d00; font-weight: 700;">SEASON 2020 | 2021</div><br />
<div style="position: fixed; top: 100px; left: 635px; font-family: trade-gothic-next-compressed, sans-serif; font-size: 31px; font-style: italic; line-height: 0px; color: #ffffff; font-weight: 400; letter-spacing: 2px;">...for the refreshment of the soul</div>

If you would like login credentials to investigate for yourself, please advise. 

Have you gotten any answers? My home page overlay text is all messed up in different browsers and I am at a loss.