4th project - Order Summary Component

It looked really simple at the beginning, but when you build it with vanilla CSS, you will find some details which might take some time.

Please help me to understand the following. I had to play with, margin and padding in media queries to make it look like the screenshot. If you know then answer It would be appreciated 😃

1> I could not find out how to dynamically decrease space between an image of the note icon and the div with the text "Anual Plan" and text "$59.99/year"

2> I was trying to understand rem in dept. When I checked the font size for 1440 desktop size and for mobile are not changing in the setting and the font looks exactly the same. I only know that 1 rem is the font size of the root element, but do not know how they can help us

3> when we use rem? is it good practice to replace all pixels with rem?

4> When you hover over the button "Cancel Order" you can see it won't only activate the hover effect when you hover over the text but there is white space around it which activates it too. Is there a way to remove that white space and only activate hover effect when hover over the text "Cancel Order"

Thank you in advance