Stats preview card component fully responsive with flexbox

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

iMAGE BLEND 📸:

• We can quickly resolve it by adding mix-blend-mode property to the image and add the violet color as the background for the image container

• Example:

.rightPanel  {
background: hsl(276.9, 63.8%, 61%);
}

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

• After these steps you can remove the entire .filter element and it's styles to make the code more cleaner and reusable!

• Now you got the desired result where the image is perfectly blended with the background violet, and the result will accurately match the design image

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

to mix the color to the image you use

picture{
background-color: color of choice;
}
picture img{
mix-blend-mode: multiply
opacity: 0 - 1;
}

and the background color to a wrapper like <picture> or <div> depending on situation