Product preview card component

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

Here I had more fun with flex-grow and justify-content attributes. Also a product image source should be altered depending on window width.

  <main>
    <div class="card">
      <img class="product" alt="Product" />
      <div class="info">
        <p class="category">Perfume</p>
        <h1>Gabrielle Essence Eau De Parfum</h1>
        <p>
          A floral, solar and voluptuous interpretation composed by Olivier Polge,
          Perfumer-Creator for the House of CHANEL.
        </p>
        <div class="price">
          <h1 class="actual">$149.99</h1>
          <p class="old">$169.99</p>
        </div>
        <button><img src="./images/icon-cart.svg" />Add to Cart</button>
      </div>
    </div>
  </main> 

.card {
  margin: 28px 16px 28px 16px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
}

.product {
  width: 100%;
  height: auto;
  content: url(./images/image-product-mobile.jpg);
}

.info {
  margin: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

.price {
  display: flex;
  direction: row;
  align-items: center;
}

/* Desktop version */
@media (min-width: 36em) {
  .card {
    flex-direction: row;
    width: 37.5em;
    height: 28.125em;
    flex-grow: 0;
  }

  .info {
    margin: 32px;
  }

  .product {
    width: auto;
    height: 100%;
    content: url(./images/image-product-desktop.jpg);
  }
}

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

I needed to stretch product info components properly. Thus, justify-content: space-between has been used.