Stats preview card component

Hi there, good job. I see you're using flexbox which is good and it adjusts on both mobile and desktop. Here are some suggestions if you're interested.

1. Equal Width Containers -- If you set flex: 1 to both children (main, and div) then they will take up 50% each. Flex is shorthand for a number of properties such as flex-shrink, flex-grow, flex-basis. You can look more into flexbox for a deep dive.
2. Main Element -- I believe the entire card should be a main element and the two sides nested divs, or a div and a picture element. Because the picture is part of the main content.
3. Image Sizing -- The property object-fit: cover can help you with sizing images. You can set height: 100% and width: 100% and it will clip the image relative to the parent contianers dimensions. There are also two image versions to use header-image-desktop and header-image-mobile. You can use the picture element or alternatively srcset attribute to switch between these at different screen sizes.  
4. Image Contrast -- Mix-blend-mode: multiply can help make the image contrast resemble the design more accurately.
5. Optional Layout Adjustment -- If you wanted to, you could space your left side content differently - such as making it a flex container, ordering vertically with flex-direction: column and spacing the footer away with an auto margin. There are many alternatives, however, such as grid, and traditional margins which you're currently using.
6. Avoid Fixed Values -- Avoid setting a fixed height on your container (100vh or 40rem) as when your card shrinks content stacks and the height increases. If the card is not allowed to grow content will breach the container. Instead let the content decide the height of the container and set a maximum width instead.

Apologies for the formatting.