QR Code Component using CSS Flexbox and Custom Properties

Whilst I'm pleased with my solution to this challenge I did struggle to select CSS units for padding, margin, width, height, and border-radius. In the past, I generally defaulted to using em for padding and margin, px or % for width and height, and px for border-radius. For this challenge, I switched to using rem (during refactoring) and had an easier time getting my solution to match the design.

Is there a process for selecting the best CSS unit for different situations? Or are there best practices that are used most (even all) of the time?

This is probably the most pressing question I have at the moment, but any feedback and suggestions on how I can improve are very welcome!

Thank you!