Remember how I overhauled my design system just a few months ago? I'm doing it again because my variable management didn't play well with Astro (when trying take advantage of separate bundles, that is)
Basically, I was worried about how to place the intro text so it never overlaps with the image at any viewport size. Now I let the browser place it automatically.
If you want to relive the past with browsers all having their own quirks that you need to fix with weird hacks, just use shape-outside on an <svg> element
Use shape-outside with <svg> Works perfectly in Firefox Chrome fucks it up Use browser's viewport tester Firefox lets me scroll when it's too tall for the browser window Chrome doesn't. I just won't see what's going on at the bottom half.
@SteffoSpieler You can apply masks to layers so only part of it is visible. If I have a masked layer with overlapping objects inside, then along the edge of the mask you can see the colors of objects under other objects as anti-aliasing artefacts. This mustn't happen.
Volpeon