Responsive Product Preview Card WebPage

Hi Godoi, You did a nice job working with an API. Congratulation on submitting a working task. 🎉🎉

Short answer yes, There is a more standard way to switch between images instead of creating a <div class= "imagem"> you could have used the default picture tag.

<picture>
  <source media="(min-width:850px)" srcset="img_pink.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

You can even have 3 images for different screen size. You can use (max-width) for your own case

Here are a few other suggestions to the issue with your solution.

Work on HTML The landmark <div class="container"> should be replaced with <main> and also switch <div class="attribute"> with <footer>.

Landmarks in HTML are structural elements that define the major sections of a webpage. They include semantic elements such as <header>, <nav>, <main>, <article>, <aside>, and <footer>

Heading

Headings must be in a valid logical order, meaning h1 through h6 element tags must appear in a sequentially-descending order.

Hope you find this helpful

Happy Coding😀