Responsive stats preview card using flexbox

So I attempted this project right after learning about responsive web design. I followed the advice and best practice of styling mobile first. It was pretty easy and I got through it fast. Then came adjusting the styles for the desktop fit. This was going well until I came about trying to fit the image. As a result of that, I have a few questions below:

• First of all, For the mobile version, the card container height was responsive but for the desktop view , I gave it a fixed height so that I can also give the image the exact same fixed height. Is that ok ? Or is there another route I could have taken that doesn't involve me giving the card a fixed height and the image will still match with the height responsiveness of the card ? (I already gave the image a width of 50%). This part took me quite some time because I was thinking there was a way to make the height of the image grow with the card when the screen size is reducing so if you have an answer to this question it would be much appreciated

• Second of all , the breakpoint for my media query is at 900px because that is when my desktop layout was practically breaking. I read somewhere that media query breakpoints are layout specific and not screen specific. I just want to confirm whether that breakpoint is actually ok ?

@media (min-width: 900px) {

    body {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card {
        width: 80%;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        margin: 0;

        height: 480px;
    }

    .main {
        width: 38%;
        margin-left: 2.5em;
        text-align: left;
    }

    .main-heading {
        margin-top: 1.6em;
        margin-bottom: 1.2em;
    }

    .main-paragraph {
        line-height: 30px;
        margin-bottom: 5.5em;

        font-size: 1rem;
    }

    .stats {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .stats-paragraph {
        font-size: 0.7rem;
    }

    img {

        min-width: 50%;
        border-radius: 0 10px 10px 0;
        width: 40%;
        height: 480px;
    }

• I would like to know if there's another approach to adding image overlay ? Is the approach I used ok ?

img {
      filter: opacity(0.3) drop-shadow(0 0 var(--image-background-color));
}

• Would using grid here have been much easier ?

• If there's any suggestion you have for the code or structure I'm more than happy to hear feedback. If you know of a better approach, please do kindly share, it'll help me out a lot

THANK YOU