{# v0.62 CSS refactor: marketing steps reuse the existing
   .dz-step-item / .dz-step-number / .dz-step-content family from
   site-sections.css (vertical at <lg, horizontal-with-text-below at
   >=lg). The list wrapper uses .dz-section-steps-list (added below)
   to avoid clashing with the framework's `.dz-steps` rule for the
   in-app stepper. #}
{% from "site/sections/_helpers.html" import section_id_attr, section_header %}
<section{{ section_id_attr(section) }} class="dz-section dz-section-steps">
  <div class="dz-section-content">
    {{ section_header(section) }}
    <ol class="dz-section-steps-list">
      {% for item in section["items"] | default([]) %}
      <li class="dz-step-item{% if not loop.last %} is-not-last{% endif %}">
        <span class="dz-step-number">{{ loop.index }}</span>
        <div class="dz-step-content">
          <h3>{{ item.title | default("") }}</h3>
          <p>{{ item.body | default("") }}</p>
        </div>
        {% if not loop.last %}
        <div class="dz-step-connector" aria-hidden="true"></div>
        {% endif %}
      </li>
      {% endfor %}
    </ol>
  </div>
</section>