Product preview card component | CSS Grid | Flexbox | Javascript

1. I was having sizing issues with the images when i was trying to place the images using CSS e.g.

 .image-original-dt {
        background-image: url(.images/image-product-desktop.jpg)
  }

I removed the images from the CSS and instead placed them directly into the HTML

<img src="./images/image-product-desktop.jpg" alt="bottle of Gabrielle Essence Eau De Parfum" class="image-original-dt">

Which of the methods of placing images is best practise ? Placing images into HTML or CSS?

2. I'm not sure if my Javascript is best practise. I made a function that toggles a class on click. Is there a better way of doing it or is my code correct ?

Any feedback is welcome!

Thanks, Shane