Product Preview Card Component Responsive Design

1. To have the image occupy 50% of the card on the desktop view, I set the image to max-width: 50%, is that ok to do?
2. Is it ok to swap images on different screens by having two image tags, but set one to display:none and the other to display:block, and just swap it around with media queries? Are there better approaches?
3. Is there a better method to put an icon beside the text of a button? I used two span elements and treated the button as a Flexbox. (Code below)

<button>
          <span><img src="images/icon-cart.svg"> </span>
          <span>Add to Cart</span>
</button>

button {
  padding: 1.25rem;
  background-color: hsl(158, 36%, 37%);
  color: white;
  border-radius: 15px;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

4. If there are any other better approaches to anything I've implemented, please let me know.