---

* {
  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: wrap;
  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;
  background: #eef3f2;
  padding: 20px;
  min-width: 120px;
  text-align: left;
}

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

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

.row .card {
  flex: 1 1 150px; /* товары в каждой строке одинаково делят ширину */
}