Product preview card component with pure css and picture tag

What challenges did you encounter, and how did you overcome them?

Creating Equal-Width Flexbox Children

I learned that to make flexbox children have equal widths, using the shorthand flex: 1 1 50% is effective. Initially, I thought that simply using flex: 1 would suffice, as it sets flex-basis: 0% and flex-grow: 1, which should theoretically give each element equal width. However, when rendered, the image section ended up being 268px (44.67%), while the content section was 332px (55.33%), instead of both being 300px. This taught me that specifying the correct flex-basis (e.g., 50%) is crucial for achieving the desired equal-width layout when working with image.