Stats preview card component challenge hub

Hi Manvanth,

Well done, a very close match on desktop!

At a glance here is some amendments you could try. I'd really encourage you to research responsive design:

• add a media query on .container and add flex-direction: column; at a mobile breakpoint to make your design responsive. Then add order: 2; to .text-area to move the text below the image
• this is an invaluable resource A Complete Guide to Flexbox
• remove background-color: hsl(233, 47%, 7%); and height: 100vh; from .background your body could be the background instead of the extra <div>
• add the following to your body to centre your design nicely in the viewport with the above steps

    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: hsl(233, 47%, 7%);

Hey, you could try centering your component with flexbox/grid. Your solution is also missing a mobile view. The section you named background is also unnecessary, you could apply background styles on your body easily ^^