Responsive Product Review Card Component Using Flexbox

I was unsure of where exactly I should have made the break point when setting up the media query and feel like I should have set it at a smaller width because the component looks super wide when stacked vertically at the initial breakpoint and only really looks like the mobile design png after the width has been reduced a bit more. The only thing is if I did that then the component itself would completely break up. Is this ok? or is there another way to do it that makes the component as wide as it needs to be on a mobile screen without looking to small, on say a tablet screen. There was also this white space at the bottom on when viewing from mobile screens (which happened to be the body) and the only way I managed to get rid of it was by making it the same color as the background of my container, is this bad practice? What can I do better?