Product Preview Card Componentv

This is my third challenge; I hope I didn't mess up too many aspects of it. The challenge made me research and figure out stuff about media queries, swapping images, and, most important, that extremely intuitive 'grid-template-areas' property. It also put what I already know about flex to great use. Those things were the most challenging and productive.

Although it likely sounds presumptuous, I wouldn't say I'm 'unsure' about a particular area of the code. On the contrary, I saw that the <div> in my container gets taller than the image at a certain weight. I also encountered the same <div> 'gathers' all its elements/headings in its top portion when the Chrome is full size with no Inspect Tool open. To prevent that, I added another media query. So I'll be glad if someone can give me feedback on the media-query transitions.

P.S. I am a content creator and writer creating content about spiritual and personal development and nutrition; I wonder whether I should write about/document my coding progress on the same or a separate Medium page to include my content on tech, i.e., reviews, unboxing, etc.? I'll be happy if you share your opinion on that.

Sincere, Pete