Responsive Design Using Vanilla CSS' clamp(), min(), and calc().

My Last Newbie level solution for HTML/CSS only challenge.

For the responsive effects on the header, I've implemented it via background positions and a dozen trial-and-error media queries. At first, I did try to implement the "splitting" image effect as the screen grows from a smaller viewport to a wider viewport but I messed up at flexbox.

Question 1: How can I reduce my media queries in the implementation of my header section?

Question 2: I do like the idea of responsive typography, Is the use of rem on my implementation of responsive typography better than the use of pixels? or does it really matter?

Question 3: Overall, I feel like I have too many media queries. What can I do to refactor my media query code and improve the maintainability of my code?

Your feedback will be of big help. Thank you. :)