Use calc for the first time for responsive text, logo. Tablet bp.

Experimented with the calc feature for text to limit media queries. It worked out very well. For example, h1 was set to:

font-size: calc(1.8rem + 1.3vw);

I set :root font-size to 10px, which made using rem a lot easier. 1rem was now 10px instead of 16px, which again limited calculation.

I found I was able to apply the calc formula to the logos too. I also used percentages a lot for padding and margins instead of fixed pixels, which helps limit media queries further.

I also made use of the 'order' attribute in flexbox for the first-time and percentage for the row after applying 'flex-flow: row wrap;'. It made the footer a breeze to layout and make responsive. Highly recommended for other newbies if you are not familiar.

I used grid for the top section (not needed but I wanted to practice). Flex for the middle section and the footer.