{#

Element ID: Element03
Element Name: 1-2-3 cols

#}



<section id="{{ element.html_id  }}" class="spaced-out">

    <div class="numbered-steps">
        <div class="container">
        <div class="row">

            {% if(element.has_side_image) %}
            <div class="col-12 col-md-3 numbered-steps__img-col">
                <div class="numbered-steps__img-wrap">
                    <img src="{{ TimberImage(element.side_image).src }}">
                </div>
            </div>
            {% endif %}
            <div class="col-12 {{ element.has_side_image ? "col-md-9" : "col-md-12" }} numbered-steps__text-col" data-aos="fade-up">
                <div class="text-gradient__wrap text-gradient__wrap--center text-align-center">
                    <h1 class="numbered-steps__title text-gradient">{{ element.title }}</h1>
                </div>
                <div class="container">
                    <div class="row">

                        {% for col in element.cols %}
                        <div class="col-12 col-md-4 numbered-steps__item">
                            <div data-aos="fade-up" data-aos-delay="{{ loop.index * 100}}">
                                <h2 class="h1">{{ loop.index }}</h2>
                                <h3 class="h2">{{ col.title }}</h3>
                                <p>{{ col.description }}</p>
                            </div>
                        </div>
                        {% endfor %}

                    </div>
                </div>
                <div class="btn-center numbered-steps__btn" data-aos="fade-up">
                    <a href="{{  function('get_permalink', element.button_linked_page)  }}" class="btn btn--gradient">{{ element.button_text }}</a>
                </div>
            </div>
        </div>
    </div>
    </div>
</section>