Responsive- stats-preview-card-componet // flex.

Thank you Lucas , i will improve your suggestions. :D

👾Hello Martin Santillan, congratulations for your new solution!

🎯 Your solution its almost done and I’ve some tips to help you to improve it:

1.The component is a bit more rounded, try a value around border-radius: 1rem.

.main {
    width: 65rem;
    height: 26rem;
    display: flex;
    border-radius: 1rem;
    background-color: var(--Dark-desaturated-blue);
}

2.Instead of using filter you can make your hero image have the same look and the color purple overlay, you need to use mix-blend-mode using the multiply one.The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background. INSTEAD OF USING IT:

.main__desktop-img, .main__mobile-img {
    /* width: 100%; */
    /* height: 26rem; */
    /* filter: opacity(0.7) brightness(50%) contrast(100%); */
    /* border-top-right-radius: 0.4rem; */
    /* border-bottom-right-radius: 0.4rem; */
}

Here’s how you can add this to your img selector: img { mix-blend-mode: multiply; opacity: 84%;}

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!