Best Practice for Overlapping Images Layout

Hi everyone,

I am working on a site that contains a pre-navbar “splash-screen” comprised of a couple of images and a headline that all overlap (check here for the example page). I have tried different ways of creating this layout including grid (12x12 and manually stretching the contents) as well as setting the wrapper to flex, the content to position relative (as well as absolute in a different try) and then adjusting the position using percentages.

In all approaches I am very unhappy with how the images don’t seem to scale and I need to manually adjust the size at every breakpoint.

I wonder if anyone has a best practice for these kinds of layouts that they could share.

Please ask, if my problem is unclear from my description.

Thank you

Here is my site Read-Only: TBC Preview