All solutions

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.

Does anybody have a better way of implementing the grey background in the top right? I originally added it by using absolute positioning and top/right 0, but it goes beyond the body. I set the body to 1440px as the design says but my screen is larger. I found a solution which was to apply a background to the grid cells using ::before and ::after, but it feels like a bit of a hack. Also, it wouldn't work if I wasn't using CSS grid.

Code: .grid::before { content: ""; background-color: hsl(207, 33%, 95%); grid-column: 2/3; grid-row: 1 /2; z-index: -999; }

.grid::after { content: ""; background-color: hsl(207, 33%, 95%); grid-column: 2/3; grid-row: 2 /3; height: 50%; border-radius: 0 0 0 50px; z-index: -998; }