Responsive card using CSS Grid & CSS Flexbox

The purple color doesn't look as bright as the original design. You should use mix blend mode on your pseudo element like this

.image::before {

content: ''; position: absolute; inset: 0; background: var(--soft-violet); width: 100%; height: 100%; mix-blend-mode: multiply;

}

The rest of the code can be found here. I haven't done the mobile site though :-) https://github.com/aropsta/card_data-analytics-statistics

Hello

A few suggestions for you

• you don't need that pseudo element on the background image. You can place a background image and a background color (and background blend mode) all on the same element
• 62.5% font size makes me cry when I see it. You've mitigated against the huge potential accessibility issues in this case by rounding the body size back up in rem but don't forget not all elements will inherit font size so you are introducing potential fails of you forget to increase font size again on those elements in larger projects. There is no reason in the modern web to make 1rem equal 10px, it really brings no benefits
• the html for the stats needs work on this. Never have text in divs or spans alone, always meaningful elements. If you turned the styling off on this and just thought about the raw content, those 3 stats would almost certainly be a list with 3 bullets. That means the most appropriate html choice here is an unordered list with 3 list items (and remove the paragraph tags wrapping each number)
• most important of all - stop nesting css selectors! You are massively increasing css specificity at the moment and that will inky cause problems. Stick to single class selectors as much as possible and try to keep your css specificity nice and low/flat
• it's not wrong to use grid for this but an unusual choice. The layout is only going along one axis, so y ok u could acheive the exact same with less css using flexbox (the only thing that changes between mob and desktop is the flex-direction, or simply adding display flex on desktop)

I hope this is helpful

You did a good job with this, the desktop version looks great. I would set the mobile version to a max-width of about 450px. In your media query(960px) set it to the max-width: 1050px. That will keep the mobile version from stretching like it does now.

Hope this helps.