FEM Intro section with dropdown navigation

This challenge was built upon the previous one I did, which was the News Homepage.

And since this challenge is similar to the previous one I did, a lot of the underlying code was moved into here as well. The only thing different was the two dropdown menus, but even that is derived from the main one. The lines of JS in this challenge increased.

Some notable things that are different or improved from previous challenge(s):

1. A new pattern for the grid container. This seems to solve the issue I had in the News Homepage challenge wherein the header/navbar was not behaving as I hoped.

2. In mobile mode, I also fixed the issue where in some x-sized viewport, a vertical scrollbar appears and clicking on the hamburger icon shifts it a bit. The fix involves adding an additional utility class with JS detecting if window.innerWidth > document.body.clientWidth. Also, a little transition to delay the appearance of the 'X' icon until the full deployment of the mobile menu was added in.

3. As for the dropdown menus in the navbar, I read lots of articles on the proper implementation. I still don't know which is the best. The one I used is derived from Fly-out Menus | Web Accessibility Initiative (WAI) | W3C. But in the example, there's only one dropdown. I had to figure out how to do two of them and I wanted to close one when I clicked on the other. I ended up using two nested forEach statements.

...and a few more musings in the github repo under README.md. Have a look at my work and give a comment!