Responsive Product Card using CSS Grid and mobile worflow

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

I am most proud of how I used flexbox to organize my elements with little hassle. I would actually try a more mobile focused approach first as it wasn't really working for me.

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

I had a bit of trouble with changing the image when the screen size changes. I had to set 'display:none' to my images depending on the screen size to run them without crashing the site.

@media (max-width:32rem) {
    .product {
      flex-direction: column;
    }

    .image-desktop {
        display: none;
      }
  
      .image-mobile {
        display: block;
      }
  }

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

I still have trouble getting everything to fit the right size. They're either still too big or too small compared to the solution.

I'm also still having trouble with reshaping the child elements within their parent element. I still don't understand inheritance when it comes to images.