description = "Features 2 Section"

[viewBag]
==
{% set size_1 = data.section_features2_size %}
{% set size_2 = 12 - size_1 %}
<div {% if data.section_features2_id %}id="{{ data.section_features2_id }}"{% endif %} class="features2">
    <div class="row features2-wrap">
        <div class="col-lg-{{ size_1 }} min-h-xs bg-cover {{ data.section_features2_position }} {{ data.section_features2_parallax ? 'jarallax' }}" style="background-image:url({{ data.section_features2_image|media|resize(1000, 650, { mode: 'crop' }) }});" {% if data.section_features2_animation %}data-aos="fade-right" data-aos-duration="1200"{% endif %}>
        </div>
        <div class="col-lg-{{ size_2 }}  {{ data.section_features2_bg }} {% if data.section_features2_position == 'order-1' %}order-2{% else %}order-1{% endif %}" {% if data.section_features2_animation %}data-aos="fade-left" data-aos-duration="1200"{% endif %}>
            <div class="py-7 pr-5 pl-md-24 mt-20 mb-12 pl-5 max-w-md">
                <h2 class="mb-7">{{ data.section_features2_title }}</h2>
                <p class="opacity-75">{{ data.section_features2_desc }}</p>
                <ul class="list-unstyled mb-7">
                    {% for fields in data.section_features2_list %}
                        <li class="py-2"><i class="{{ fields.section_features2_list_icon }} mr-2 text-default"></i> <span class="text-dark">{{ fields.section_features2_list_title }}</span></li>
                    {% endfor %}
                </ul>
                {% if data.section_features2_btn_link is not empty %}
                <a class="btn btn-danger btn-rounded btn-lg px-12 btn-chevron text-white" href="{{ data.section_features2_btn_clink ? data.section_features2_btn_clink : (data.section_features2_btn_plink | staticPage) }}">
                    <span>{{ data.section_features2_btn_label }}<i class="{{ data.section_features2_btn_icon }}"></i></span>
                </a>
                {% endif %}
            </div>
        </div>
    </div>
</div>