Stats Preview Card Component

👾Hello Jerry, congratulations for your new solution!

Here's some tips to improve your component card:

Make the container rounded:

.overall-card {
    border-radius: 12px;
}

Make the image rounded:

img {
    border-radius: 0 16px 16px 0;
}

To 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%;
}

To add the exact same purple overlay effect for the image use mix-blend-mode` (the best choice in my opinion). See the code below

img {
mix-blend-mode: multiply;
opacity: 0.8;}

👋 I hope this helps you and happy coding!