Карточки товаров: что показать и как сделать каталог ровным

<article class="card">
  <img class="card__img" src="/img/oak-table-160.webp" width="800" height="1000"
       alt="Стол из дуба 160 × 90 см с промасленной столешницей" loading="lazy">

  <h3 class="card__title">
    <a class="card__link" href="/catalogue/oak-table-160">Стол из дуба 160 × 90</a>
  </h3>
  <p class="card__meta">Массив дуба · масло и воск</p>

  <p class="card__price">
    <b>24 000 ₽</b>
    <s><span class="visually-hidden">Было </span>30 000 ₽</s>
  </p>
  <p class="card__stock">В наличии · привезём завтра</p>

  <button class="card__fav" type="button" aria-pressed="false" aria-label="В избранное">
    <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false">
      <path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10Z"
            fill="none" stroke="currentColor" stroke-width="1.75"/>
    </svg>
  </button>
</article>

/* Две колонки от 320px, на широких экранах больше */
.catalogue {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(9rem, 45%), 1fr));
  gap: var(--space-4) var(--space-3);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Одна рамка для любого фото, что бы ни загрузили */
.card__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--color-surface-muted);
}

/* Название — не больше двух строк */
.card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Нажимается вся карточка */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Цены на одной линии по всему ряду */
.card__price {
  margin-top: auto;
  font-variant-numeric: tabular-nums;
}

/* Кнопка лежит поверх растянутой ссылки */
.card__fav {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 1;
  width: 2.75rem;
  height: 2.75rem;
}