Basic HTML and CSS using small amount of flexbox and image filter()

The two areas where I had the most challenge were:

1: What is the best way to handle the mobile to desktop scaling? Here I chose to lock the desktop site's main container to 1110px and then switch to the mobile view with a media query at sizes below that. This was because allowing the container to scale would mess up the image size/placement. Is this the right way to handle this?

2: Tinting the image. I came up with two solutions. The first was to create a transparent div with a pink tint using RGBA and then to position it atop the image. The second (which I eventually went with) was to use the filter() function to tint the image directly. Is there a better way to do this?