All solutions

1. How would I go about applying the image overlay hover using flexbox?

2. The .container div had an additional 5px of height vs it's containing image , causing the overlay to bleed past the image a bit. Granted I found a solution with height: calc(100% - 5px); I don't understand why this was a thing.

3. What are common best practices for structuring/organizing CSS? ( Besides loosely following the HTML order in terms of how I declared CSS, it's more or less spaghetti)

Any feedback is welcome.