Product responsive

I separated the media query into a minimum and a maximum width parameter. After thoroughly investigating the problem, I found out that the browser ignores the media query and maintains a row flex layout. Also, the div that is the direct parent of .product is .container, not .products. This way, the <h1> remains intact.

This fixed it in all browsers, please review.