Desktop / Mobile responsive design. Using HTML, SCSS, and Flexbox.

Hey there, this is my first completed project. And I have a question that I'm hoping to get some feedback on.

1. When creating a colored overlay over my image, I used the ::after pseudo selector to do so. But it added about 5-6 pixels worth of height to the div box my image was in every time the selector was added so the colored overlay actually came out of div box and the only way I could fix this was by making the height of the pseudo selector 99%. Although it got the job done I'm looking for some feedback because I'm sure there's a better way to make sure the overlay didn't bust out of the box?

If there's anymore feedback anyone can think of when looking at this, that would be very much appreciated! Have a good day.