Order Summary Page using Flexbox

Feedback for the Media Queries part will be highly appreciated.

When font-size(rem) is not defined, it inherits from the body whereas when defined does so from the root. Instead of individually defining each element's font-size (have to do when using rem since changing the root's font-size is frowned upon), is there any other option?

Updated the background-image after restart.