Product Preview Card Component with flex-box, react css-modules

Filling up vertical space in a section horizontally adjacent to an image when the height of an element has been decided by height of the image was tricky. I didn't want to have to crop the image. So shrinking the over all component width, causing the image width to shrink resulting in the height to shrink (aspect ratio). This then reduced the vertical space to fill in the adjacent section.

Also noticed wrapping an image with a styling div of fixed width, setting the width of the image to 100% of the styling div, the div's height does not fit to the image, even though the default height should be fit-content, there's always a tiny gap between both heights

I used a lot less html tags and more semantic appropriate tags, less class styling and more css selectors based styling, just like I wanted.

I also settled on picking the size of elements based on the width of the display rather than having its size super responsive (adaptive), growing and shrinking for every tiny change in display size.

Although I did play with the latter idea, and realized it could be done. It required a lot of effort, interaction decisions and edge cases to account for. Maybe I'd write about it some other time. My epistle's getting a bit too long.

next time I'd try my hands on optimising for accessibility.

Would appreciate any and all feedback/criticisms.