Responsive Product Preview Web Component Using HTML & CSS Flexbox

#what-i-found-difficult

• i found making the site fully responsive on all viewports and orientations a bit difficult to do.
• i found it hard to efficiently use css units and values
• i also found it hard to interchange the between desktop image and the mobile image properly.

#area-of-uncertainty

• the scalability of my code
• proper code formatting

#questions-on-best-practices

• how can i write better semantic Html?
• how can i utilize css properties properly especially in regards to the interchanging of the images?
• what are the best practices in case of accessibility here?