Equalizer landing page using plain HTML and CSS

It was an enjoyable but very tricky challenge. Does anybody know a good approach to positioning background images/patterns/decorations? Usually, I set some initial values using the devtools and play around a bit until I find the values that seem close to the design, but I have the feeling that I'm depending a lot on "magic" numbers. Any suggestion on how to approach background images and decorations would be greatly appreciated.

As for the layout of the card component and the phone illustration, I ended up using absolute positioning for the former and transform/translate for the latter. Is this okay or would it be better to consistently use one method?