Responsive Product Card (Mixing CSS variables, flex and gid)

"newbie here" First time using CSS variables and the global resets and also first time completely avoiding using pixels and fixed sizes (lot of googling and youtube , but tried to it without looking back)

There was a part (commented on the css code) related to the .product class on media query where a white space kept appearing under my img when switching to two column layout , if someone can help me understand why . Tried grid and flex but both when i hit a certain width there is a white space under the image then few pixel(width) later it disapear .