Responsive Product Preview Web Component Using HTML & CSS Flexbox

I have another suggestion. Instead of adding border-radius on both elements, you can add it directly to .product-preview. So then, you don't need to worry about it on mobile/desktop.

.product-preview {
  border-radius: 10px;
  overflow: hidden;
}

.product-image {
  /* border-radius: 10px 0 0 10px; */
}

.product-main {
  /* border-radius: 0 10px 10px 0; */
}

Hello Johnny

For different imgage source based on screen size, you can use the "srcset" attribute in a picture element:

<picture> <source media="(min-width:660px)" srcset="images/image-product-desktop.jpg"> <img class="card__pic" src="images/image-product-mobile.jpg" alt="Product picture"> </picture>

reference: https://www.w3schools.com/tags/att_source_srcset.asp

Johnny, Congratulations!! 🎉 you have completed your first challenge.

Your style of asking questions is very well & appreciated.

I have some feedback.

.product-preview {
  /* You should give the card width. So you can get more control over your layout. */
  max-width: 40rem;
}

.product-main {
  /* So you don't need to give width here. */
  /* width: 40vh; */
  /* This code will make the main content 50% of the card width. Now the image width will be 50% too. */
  flex: 1 0 50%;
}

.product-image {
  /* You shouldn't hard code this. */
  /* height: 57vh; */
  object-fit: cover;
  height: 100%;
}