Product Preview Card Component

Hello @Saitenhexer, Good job!

You can employ the <picture> element with <source> tags and media queries to make the product image responsive

• HTML:

<picture>
  <source
    srcset="images/image-product-mobile.jpg"
    media="(max-width: 600px)"
  />
  <source
    srcset="images/image-product-desktop.jpg"
    media="(min-width: 601px)"
  />
  <img src="images/image-product-desktop.jpg"/>
</picture>

• CSS:

@media (max-width: 600px) {
  .your-grid-container {
    grid-template-columns: 1fr;
  }
}