Responsive stats preview card

Hello there! Yes, this is a tricky one challenge. If you allow me, here are a few suggetsions: For the image troubble, you may look for picture tag in HTML 5.

There are other issues regarding responsiveness. First of all, you would want to set the following styles in your body tag:

body {
    background: var(--main-background);
    display: flex;
    flex-flow: column;
    justify-content: start;
    align-content: center;
    min-height: 100vh;
}

It will allow you to set the main tag a justify-content:space-between, and the two sections of the card will be equally apart.

For the main tag it self, you can set

main {
    display: flex;
    justify-content: space-between;
    max-width: 820px;
    background: var(--card-background);    
    margin: 7rem auto;
}

The max-width attribute will avoid the stretch effect. For .main-content and .img-background, you'd want to set a width:100%, for the .main-content a padding:2rem is enough and finally for the order of element's to swap, you may want to set

@media screen and (max-width:820px){
main {
    display: flex;
    flex-direction: column;
      width: 375px;    
}
.main-content {
    padding: 2.5rem;
    text-align: center;
    order: 2;
}
}

If you have further questions, please, reach me out, I'll be more than happy to contribute somehow. I must say that looking at your solution now, mine might be over elaborated, I'll review my code right now haha 😅.