Product Preview Card with CSS and HTML

I wasn't sure how to change the image file for different screen sizes, but then I saw this article on web.dev. I was also having a hard time aligning the image's bottom with the card bottom on desktop version, but then I realized I just had to adjust the .card height to 450px.

If there are other alternatives for aligning the bottom of an image with the bottom of the card, please let me know. I don't know why the card's height was always bigger than 450px in the desktop version since the content wasn't as high as 450px. I thought the image height would set the card height to 450px automatically, but it turned higher than I anticipated.