Responsive Stats preview card component

Hi Alcpereira,

Overall a really decent solution - nice work!

Some feedback for you:

• add display: block; to your image, this will remove the 4 pixels difference
• add mix-blend-mode: multiply; to .hero-banner > picture::after and remove the opacity to match the image colour with the design file
• regarding the transition from desktop to mobile, one solution would be to bring your media query in as soon as the image gets squished. Another solution would be to use relative units (REM) not absolute units (px) to help the design scale
• here is a good video and an article that goes into the REM concept

Good luck with it all

Hi @alcpereira

Congratulations on completing the challenge !!

Here I have some suggestions to improve it :

First why you have space in mobile preview on right of the image is that because simply that is the actual image width and it doesn't increase it. Actually you have written height : 100% twice. You can just simply remove both the heights and add width : 100% which will also change its height in ratio to its image.

Then also in mobile preview I suggest you give some top and bottom margin too to your card instead of auto.

Also in desktop preview add these to .stats to add even spaces between your .stat (stats components)

.stats{
    width: 100%;
    justify-content: space-between;
}

This takes the whole card width then spread the items in it with even space between them to justify.

Overall you did great !!

Hope this helps

Happy Coding :)