<main>
  <section class="card-row">
    <article class="card">
      <div class="card__img" aria-label="Preview of Whizzbang Widget" style="background-image: url(https://placeimg.com/300/500/tech)"></div>
      <div class="card__content">
        <h3>Whizzbang Widget SuperDeluxe</h3>
        <p>
          Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream
          biscuit marzipan. Macaroon pie sesame snaps jelly-o.
        </p>
        <a href="#" class="button">Add to Cart</a>
      </div>
    </article>
    <article class="card">
      <div class="card__img" aria-label="Preview of Whizzbang Widget" style="background-image: url(https://placeimg.com/320/240/tech)"></div>
      <div class="card__content">
        <h3>Whizzbang Widget SuperDeluxe</h3>
        <p>
          Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream
          biscuit marzipan. Macaroon pie sesame snaps jelly-o.
        </p>
        <a href="#" class="button">Add to Cart</a>
      </div>
    </article>
    <article class="card">
      <div class="card__img" aria-label="Preview of Whizzbang Widget" style="background-image: url(https://placeimg.com/400/200/tech)"></div>
      <div class="card__content">
        <h3>Whizzbang Widget SuperDeluxe</h3>
        <p>
          Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream
          biscuit marzipan. Macaroon pie sesame snaps jelly-o.
        </p>
        <a href="#" class="button">Add to Cart</a>
      </div>
    </article>
  </section>
</main>

// Learn more and about the alternate solution:
// @link https://moderncss.dev/css-only-full-width-responsive-images-2-ways/
* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Baloo 2", sans-serif;
  background-color: #f9f9f9;
}

main {
  padding: 2rem;
}

.card-row {
  display: grid;
  grid-gap: 2rem;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr));
}

.card {
  border: 1px solid #c9c9c9;
  border-radius: 7px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.card__content {
  padding: 20px;
}

.card__img {
  background-size: cover;
  background-position: center;
  // 16:9 ratio
  padding-bottom: 62.5%;
}