<div class="my-4 not-prose overflow-x-auto">
  <ol class="steps {% if self.is_vertical %} steps-vertical {% endif %}">
    {% for item in self.items %}
    <li class="step {% if item.color %}step-{{ item.color }}{% endif %}">
      <span class="step-icon">
        <i data-lucide="{{ item.icon }}" class="size-4 lg:size-6"></i>
      </span>
      {{ item.name }}
    </li>
    {% endfor %}
  </ol>
</div>
