centering scalable text
Hey, i have a design where some decorative text sits behind some content. The decorative text is supposed to stay centered however i can't quite figure out how to achieve this on smaller screen sizes (see images for what i'm attempting and what's happening)
The text is supposed to overflow the sides on smaller sizes and have that hidden by the container. I have it figured out on desktop, though that method probably won't be fit for the mobile design due to any overlap making the content do the same as they share the same grid cell. the problem is just scaling it down. My initial thought was using position absolute for the decorative text however since it gets taken out of the doc flow, it has the potential to overlap the header and footer.
I'd appreciate any help learning a method for this sort of thing, thank you in advance.
https://codepen.io/deerCabin/pen/ExBqoJg
The text is supposed to overflow the sides on smaller sizes and have that hidden by the container. I have it figured out on desktop, though that method probably won't be fit for the mobile design due to any overlap making the content do the same as they share the same grid cell. the problem is just scaling it down. My initial thought was using position absolute for the decorative text however since it gets taken out of the doc flow, it has the potential to overlap the header and footer.
I'd appreciate any help learning a method for this sort of thing, thank you in advance.
https://codepen.io/deerCabin/pen/ExBqoJg
