stats-preview-card-component-main using vanilla css and flex box

I think the purple colour on the overlay does not match that of the design which seems to be much more vibrant, not sure why. Also I had issues with the responsiveness on the desktop version - whenever the width of the page was sized smaller, it would add padding at the top and bottom of the image instead of letting the image fill the whole height of the component. So what I did was set the breakpoint to show the mobile version just before that issue occurs. Any ideas how to fix this so that it is actually responsive?