Mobile layout first, SCSS, BEM methodology

It is because you have "display: block;" on mobile/tablet sizes.

Change this to flex for all widths (and you'll probably have to switch the flex-direction to column too) to fix this.

Alternatively, you could not use a :before as an overlay. I generally stay away from :before and :after if possible as they can be tricky. If you check my solution: https://waynehaworth.github.io/FEM-Meet-Landing-Page/ I used a semi transparent background gradient over the top of a background image directly on the <footer>, like this:

background: linear-gradient(rgba(77, 150, 168, 0.9), rgba(77, 150, 168, 0.9)), url(../images/image-footer-tablet.jpg);