Product Preview Card

This should be a very easy challenge, and yet I'm still struggling to get the mobile image displayed correctly! Please help!

I know it is to do with the height, but I tried everything I could think of and still can't get it right. How do I modify the height on mobile view to show the image correctly?

.card-container {
    display: grid;
    place-content: center;
    grid-template-columns: 1fr 1fr;
    max-width: 50rem;
    height: minmax(auto, 40rem); 
    overflow: hidden;
    border-radius:20px;
}

Thank you!