---

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  padding: 20px;
}

/* Внешний контейнер — 3 строки друг под другом */
.catalog {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 2px solid #2f4f4f;
  padding: 16px;
  max-width: 700px;
}

/* Каждая строка — тоже flex-контейнер, но по горизонтали */
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap; /* запрещаем перенос — всегда 3 карточки в строке */
  gap: 12px;
}

/* Товары в первой строке выравниваем по левому краю (как во Froggy justify-content) */
.row-1 {
  justify-content: flex-start;
  align-items: center;
}

/* Во второй строке товары распределены с промежутком между собой */
.row-2 {
  justify-content: space-between;
}

/* В третьей строке товары прижаты к правому краю */
.row-3 {
  justify-content: flex-end;
}

.card {
  border: 1px solid #2f4f4f;
  padding: 20px;
  text-align: left;
}

/* цветные карточки — чтобы товары в строке были визуально различимы */
.row .card:nth-child(1) {
  background: #dbeeff;
}
.row .card:nth-child(2) {
  background: #e2f7e1;
}
.row .card:nth-child(3) {
  background: #ffe3ec;
}

.card h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.card p {
  margin: 0;
  font-size: 13px;
  color: #555;
}

.row .card {
  flex: 1 1 0; /* три карточки делят ширину строки строго поровну */
  min-width: 0; /* разрешаем сжиматься, а не переноситься на новую строку */
}