All solutions

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;
}

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

CSS Styling

• I wanted to decrease the height of the card to make it more centered, would setting a max-height % for my card div be the correct approach?
• I selected font weights 400 and 700 for the google font, how does it decide which elements will use those weights? (Seemed like my h1 and p tags automatically took the weights 700 and 400 respectively)
• I originally wanted to wrap my h1 and p tag into a <div class="text">, would that be unnecessary?

Code Organization and Practices

• Are there any bad practices that are worth mentioning?
• Is there anything I can do to improve readability?