All solutions

The challenge is not fully complete as of yet.

I changed the height of the header to 100vh which is why the image isn't the same as I thought it gave the user more of an inclination to scroll down to see the rest of the content.

I still have some fixes to implement that I am aware of: JS to make the mobile navigation work. JS to make the header sticky. (Desktop/ Tablet) and an issue where the grid is responsive but one of the divs is a different size @ 50em/ 36em.

I would really appreciate feedback on these issues and potentially how to fix/ implement them!

In the media query @media (max-width: 29em) { html { font-size: 50%; }

I wrote: .hero-img { transform: scale(0.8, 0.8); height: auto; object-fit: contain; } Could there have been a better solution by making the image fit the div instead of transforming the image size?