/* Белая плитка с иконкой: строка «что будет в маркетплейсе», списки
   возможностей платформы и подобные перечни. */

.icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: var(--radius-md);
  background: var(--neutral-white);
  box-shadow: 0 8px 12px rgba(156, 141, 128, 0.1);
  color: var(--sand-500);
}

.icon-badge .icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

/* Плитка на светлой секции: песочная заливка вместо белой с тенью. */
.icon-badge--soft {
  background: var(--sand-100);
  box-shadow: none;
}

/* Пункт перечня: плитка с иконкой и подпись. В макете строка таких пунктов
   имеет фиксированную высоту 92, поэтому подписи в разных колонках стоят
   на одной линии. */
.feature-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 500;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-strong);
}

/* Иллюстративная иконка: многоцветная, currentColor не годится,
   поэтому она приходит фоном из отдельного файла и крупнее — 28. */
.icon-badge__art {
  width: 28px;
  height: 28px;
  background-image: var(--icon-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

@media (min-width: 768px) {
  .feature-item { min-height: 92px; }
}