Stats preview card component solution

Congratulations well done. I took a quick look at your markup and css and from what I've seen, it's not that bad. I've seen worst than this. You are in the right track.

/* Q1 as for the images you can use the picture element, you'll have to do some adjustments to fit you page, but this works */
<div class="right_card card">
<picture>
<source media="(min-width: 900px)" srcset="images/image-header-desktop.jpg">
<source media="(min-width: 700px)" srcset="images/image-header-mobile.jpg">
<img src="images/image-header-desktop.jpg" alt="">
</picture>
</div>

/* Q2 this is how you can solve ti*/
/* add a background color to right card, you are going to use this to blend with the image */
.right_card {
background-color: var(--soft-violet-accent);
  
}
  
.right_card img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0 10px 10px 0 ;
mix-blend-mode: multiply; /* to blend the background color of the card with the image, you can use mix-blend-mode and set it to multiply */
opacity: 0.8; /* add opacity to it, and play with the opacity until you get what you want */
}