Mobile-first solution using BEM, Flexbox, and SCSS

I posted my first solution which didn't have the purple filter applied to the image because I didn't know how to do it.

Thanks to all the people who commented with answers! Their input gave me valuable insight that got me the result I wanted.

One area of concern for me is that I've used a background-image and an img which determines how the background image will grow and shrink on different screen sizes.

Is that bad for performance?