Responsive Product Card using Grid and transitions on desktop

I struggled using Grid on the desktop version of my design. Once I expanded to 600px for a design, I wanted the img on the left, but it didn't automatically fill the area, and the card was not split evenly 50/50. After placing a display: grid on the body, the image scaled properly and it was back to being responsive.

What would be best practice be on using grid vs flexbox? What scenarios have you ran into that made it "click" when you should use one over the other?

I'm open to any more feedback that you notice with the design or code! Thanks!