{#

Element ID: Element04
Element Name: Three cols

#}


<section id="{{ element.html_id  }}" class="values">
    <div class="container">
        <h1 class="values__title" data-aos="fade-up">
            <span class="values__title-addon">{{ element.above_title }}</span>
            <div class="text-gradient__wrap text-gradient__wrap--center">
                <span class="text-gradient">{{ element.title }}</span>
            </div>
        </h1>
        <div class="row">
            {% for col in element.cols %}
            <div class="col-12 col-md-4 values__item" data-aos="fade-up" data-aos-delay="{{ loop.index * 100 }}">
                <img class="" src="{{  TimberImage(col.icon ).src }}" alt="Safe infographic" />
                <h2>{{ col.title }}</h2>
                <p>{{ col.description }}</p>
            </div>
            {% endfor %}


        </div>
    </div>
</section>