Product Preview Challenge

In this challenge I incorporated some accessibility tips I got from my first challenge, and I tried using Flexbox this time.

I had some trouble when the media query was called for the desktop version. The main container turns from flex-direction column to row on the query, being it's two items the product-photo section and the product-info section but the product photo section displayed a bottom space that I didn't know what it was. The product info section occupied the 100% of the heigth, no problem with that, it was only the one on the left. I tried some things and what worked for me was to set nothing for the product photo width in the media query and set the img width to the exact px amount of the main width. What doesn't make sense to me is that the product-photo section retains the 100% width from mobile, buy when tried to set it to 50% of the main width or the exact px width of main for desktop it didn't work, had to leave it at 100% and only change the img width.