Stats Preview Card

Put your container inside main tag and your accessibility issues will be solved. use justify-content: space-between on the '.contain-desc' to align the text in center with the image.

👾Hello TAN NGUYEN, congratulations for your new solution!

Here's some tips to improve your component and its responsiveness:

You need to fix the container size and responsiveness, to do that add max-width: 1110px to create the container size and make it responsive allowing it to scale.

.container {
    max-width: 1110px;
}

Then you've to align all the text for the container left:

.container {
text-align: left; 
}

To add the exact same purple overlay effect for the image, matching the design files you can use, filter, background-blend-mode or 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!