{% load wagtailcore_tags wagtailimages_tags static %}

{% for instruction in self.steps %}
        <div class="row {%if self.settings.item_css_class%}{{self.settings.item_css_class}}{% else %}gx-4 gy-4 mb-4 border-bottom{% endif %}">
            <div class="col-lg-6
            {% if forloop.counter|divisibleby:2 %}order-last{% endif %}">
                <h3 class="mb-2 
                {% if self.alignment == "center" %}text-center
                    {% elif self.alignment == "left" %}text-start
                    {% else %}text-end{% endif %}
                ">{{ instruction.value.header }}</h3>
                <div class="content-instructions">
                    {{ instruction.value.content_1|richtext }}
                </div>
                <div class="d-flex mb-2
                {% if self.alignment == "center" %}justify-content-center
                    {% elif self.alignment == "left" %}justify-content-start
                    {% else %}justify-content-end{% endif %}">
                {{ instruction.value.buttons }}
                </div>
            </div>
            <div class="col-lg-6">
                <div class="content-instructions">
                    {{ instruction.value.content_2|richtext }}
                </div>
            </div>
        </div>
{% endfor %}