.color-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;              /* расстояние между ссылками */
    margin: 16px 0;         /* отступы сверху и снизу */
  }
  .color-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;               /* расстояние между кружком и текстом */
    text-decoration: none;
    color: #333333;         /* цвет текста ссылки */
    font-size: 14px;
  }
  .color-link:hover {
    text-decoration: underline;
  }
  .color-dot {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #cccccc;
    flex-shrink: 0;
  }
  /* Цвета кружков — задайте свои */
  .color-link.beige .color-dot  { background-color: #D2B48C; } /* Бежевый */
  .color-link.green .color-dot  { background-color: #556B2F; } /* Зелёный */
  /* Добавьте столько цветов, сколько нужно */