Responsive stats preview card component using SASS

Hi

This looks good. Your scss would be more performant if you worked mobile first next time though.

I recommend against scaling html font size down like this. It can introduce accessibility issues and it brings no real benefit to you (as you progress you'll completely stop thinking in "pixels" and there is no reason 1rem needs to equal 10px)

For the image, I would've put it in the html tbh to make it easier to place, but how you've done it is OK. Its not good practice having empty divs in the html though. So of you're going to use background image, it's better to place it in a pseudo element and use padding on the card to prevent overlap with the image.

The color of the image is done with mix blend mode multiply (or background blend mode in this case) and a little opacity

One last tip / request - please Indent your code consistently. Your code editor can even do this formatting automatically for you

hi, I see you added image throgh css(background-image). You could have also done using <picture> tag inside HTML. There is concept called "Art-Direction", by which you can provide differnent image at different screen sizes. Here is an example:

<picture>
  <source srcset="<image-path>" media="(max-width: 680px)" />
  <img src=" " alt=""/>
</picture>

You can add as many <source> tag with differnt condition. So the order is important. There can only be one <img> tag. This will be only used in cases when each and every conditions fail.

To position the image you could have used flex-order property.

Althogh your implementation is also current.

Good luck,

Happy Coding