---

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Каталог — Flex</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="catalog">

    <!-- Строка 1 -->
    <div class="row">
      <div class="card">
        <h3>Товар 1</h3>
        <div class="card-image" style="background:#e0526a;"></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <div class="card">
        <h3>Товар 2</h3>
        <div class="card-image" style="background:#e08a4f;"></div>
        <p>Sed do eiusmod tempor incididunt ut labore et dolore.</p>
      </div>
      <div class="card">
        <h3>Товар 3</h3>
        <div class="card-image" style="background:#4e9f5e;"></div>
        <p>Ut enim ad minim veniam, quis nostrud exercitation.</p>
      </div>
    </div>

    <!-- Строка 2 -->
    <div class="row">
      <div class="card">
        <h3>Товар 4</h3>
        <div class="card-image" style="background:#c3d92e;"></div>
        <p>Duis aute irure dolor in reprehenderit in voluptate.</p>
      </div>
      <div class="card">
        <h3>Товар 5</h3>
        <div class="card-image" style="background:#4bbfa7;"></div>
        <p>Excepteur sint occaecat cupidatat non proident.</p>
      </div>
      <div class="card">
        <h3>Товар 6</h3>
        <div class="card-image" style="background:#2f5fdb;"></div>
        <p>Sunt in culpa qui officia deserunt mollit anim.</p>
      </div>
    </div>

    <!-- Строка 3 -->
    <div class="row">
      <div class="card">
        <h3>Товар 7</h3>
        <div class="card-image" style="background:#7b2a8a;"></div>
        <p>Curabitur pretium tincidunt lacus, sed sagittis.</p>
      </div>
      <div class="card">
        <h3>Товар 8</h3>
        <div class="card-image"></div>
        <p>Nulla quis sem at nibh elementum imperdiet.</p>
      </div>
      <div class="card">
        <h3>Товар 9</h3>
        <div class="card-image" style="background:#4a4a4a;"></div>
        <p>Fusce nec tellus sed augue semper porta.</p>
      </div>
    </div>

  </div>

</body>
</html>

* {
  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: 720px;
}

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

/* Карточка — одинаковый размер у всех, не зависит от текста внутри */
.card {
  flex: 1 1 0;
  min-width: 0;
  width: 200px;
  height: 260px;
  border: 1px solid #2f4f4f;
  background: #fff;
  padding: 12px;
  display: flex;
  flex-direction: column;
  text-align: left;
}

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

/* Квадрат-заглушка вместо картинки товара */
.card-image {
  width: 100%;
  height: 100px;
  background: #ddd; /* цвет по умолчанию, если не задан inline */
  margin-bottom: 8px;
  flex-shrink: 0;
}

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