stats-preview-card-component

👾Hello @yagz77, congratulations for your new solution!

Here's some tips to improve your solution with the overlay image color and responsiveness:

First of all, the image overlay, to make the image have the exact same purple overlay effect for the image, matching the design files you can use mix-blend-mode. See the code below

img {
mix-blend-mode: multiply;
opacity: 75%;}

Also make your image fully responsive add display: blockand max-width: 100% and object-fit: cover to make the image auto-crop when resizing inside the column:

img {
    display: block;
    object-fit: cover;
    max-width: 100%;
}

A better way to manage the component image inserting the tag <picture> instead of a `<div> to wrap both desktop and mobile images together in the same tag, and render each image depending of the device (phone / computer) by the settings for the width you'll insert in the html

If you're not familiar with the picture tag you can look at the documentation to see how to set it: https://www.w3schools.com/tags/tag_picture.asp

👋 I hope this helps you and happy coding!