Stats preview card component

👾Hello Ehtisham Ali, congratulations for your new solution!

Nice work you've done here, the solution is almost done. Something to fix is the vertical alignment for the column with the text content using align-items: center / justify-content: leftA good practice to have all the image inside the container scaling and respecting the size of the container, you need to add max-width: 100% and add alsoobject-fit: cover to make the image auto-crop when resizing inside the column:

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

Make the image have the correct purple tone with mix-blend-mode. See the steps below to apply to the img or picture selector:

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

Here's a good article explaining these effects with mix-blend-mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

✌️ I hope this helps you and happy coding!