Responsive, Accessible Product Component

Great solution overall, you should be pleased with this.

Here are a few issues I noticed:

• the footer should be outside of main.
• try not to capitalise text in HTML. Use css to capitalise text if it’s a styling choice like this.
• look up how to write better alt text. There are some good posts in the resources channel on discord about this.
• you don't need to add aria-hidden on decorative images. Having the empty alt attribute is enough.
• I don't think the price should be in an ins element. It's just text, it's not been "inserted" like in a document highlighting edits. I'd expect a paragraph, either one containing both the current and old price or two paragraphs, with the old price wrapped in an s or del (strictly speaking the strike through is more appropriate than delete).
• try to think about the context of where this component would be used. It's a single product card. It is extremely unlikely it would act as the main heading for a whole page of content, and that tells you that this should not have a h1. Use a lower importance heading level.
• if a link opens in a new window like in that footer link, it needs to communicate that to screen readers either with some Sr only text in a span or via the title attribute on the link (eg "(opens in a new tab)").
• if you're gonna make the body a flex element it should have a column direction.
• get into the habit of including a full modern css reset at the start of the styles in every project.
• line height is usually unitless. It's not a problem it being in rem, just unusual and makes css longer.
• if you want to improve performance you can use the aspect ratio property on the img.
• it's better to define media queries in rem or em not px, so the layout can adjust well for all users including those who have a different text size.
• personally I would use grid and not flex on the component as its shorter to make it have two equal columns on larger screens.