Responsive Product preview card using CSS Flex box

What are you most proud of, and what would you do differently next time?

This project was actually more tasking that I thought it to be.I was able to complete it and I'm proud😊.

1. This is the first Project I'm doing on my own on responsive designs(asides following tutorials).
2. I was able to switch the two images for mobile and for desktop
3. I was able to vertically align my work which was a real hassle for me before.

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

CHALLENGE I was faced with the challenge of switching between the mobile image and the desktop image. SOLUTION I placed my image in a div and then gave the div an ID of "my-image" and a class of "product-image". At the breakpoint I then changed the image using 'the background-image' property on the class and set the visibility of "my-image to hidden".

#my-image{
  visibility: hidden;
}
.product-img{
  border-radius: 15px 0 0 15px;
  background-image: url("images/image-product-desktop.jpg");
  background-size: cover;
}

Pls recommendations on a better way to do this.

What specific areas of your project would you like help with?

I'd be really open to responses on these

1. How to improve typography in responsive designs.
2. better ways to switch between the images for mobile and desktop
3. How to improve on my code , because I feel it was not clean enough.