Responsive Product Preview Card Component

It's responsive but only for the asked viewport sizes, not inbetween. I would love to hear some feedback regarding css. For some reason, i just don't get flexbox. I had to use grid to achieve desktop design because i could do grid-template-columns: 1fr 1fr. When using flexbox, the image would be smaller than the content div. Could i get an explanation why? I'd love to be comfortable with flexbox and not have to use grid for such simple designs.