{% for section in page.sections_features %}
  {% assign section_index = forloop.index %}
  {% if section_index == 1 or section_index == 3 or section_index == 5 %}
    {% assign custom_class = 'custom-class-odd' %}
  {% elsif section_index == 2 or section_index == 4 %}
    {% assign custom_class = 'custom-class-even' %}
  {% endif %}

  <section class="{{custom_class}}">
    <div class="features_third_main">
      <div class="custom_container_full">
        <div class="common_container">
          <div class="col-lg-12">
            <div class="row">
              {% if section.layout == 'left' %}
                <div class="col-lg-6">
                  <div class="features_third_image position-relative">
                    <img src="{% picture direct-url pages/{{section.i_image}} %}" alt="{{section.t_headline}}" class="section-image">
                    <div class="overlays">
                        <div class="overlay"></div>
                        <div class="overlay"></div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="features_third_description" data-aos="fade-left" data-aos-delay="{{section.p_aos_delay}}" data-aos-easing="ease-in-sine">
                    <h3 data-aos="fade-down" data-aos-delay="{{section.p_aos_delay}}" data-aos-easing="ease-in-sine">{{section.t_headline}}</h3>
                    <p data-aos="fade-down" data-aos-delay="400" data-aos-easing="ease-in-sine">{{section.t_subheadline}}</p>
                    <a href="{{section.p_btn_url}}" class="learn_more" data-aos="fade-down" data-aos-delay="500" data-aos-easing="ease-in-sine">{{section.t_btn}}</a>
                  </div>
                </div>
              {% elsif section.layout == 'right' %}
                <div class="col-lg-6">
                  <div class="features_third_description" data-aos="fade-right" data-aos-delay="{{section.p_aos_delay}}" data-aos-easing="ease-in-sine">
                    <h3 data-aos="fade-down" data-aos-delay="{{section.p_aos_delay}}" data-aos-easing="ease-in-sine">{{section.t_headline}}</h3>
                    <p data-aos="fade-down" data-aos-delay="400" data-aos-easing="ease-in-sine">{{section.t_subheadline}}</p>
                    <a href="{{section.p_btn_url}}" class="learn_more" data-aos="fade-down" data-aos-delay="500" data-aos-easing="ease-in-sine">{{section.t_btn}}</a>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="features_third_image position-relative">
                    <img src="{% picture direct-url pages/{{section.i_image}} %}" alt="{{section.t_headline}}" class="section-image">
                    <div class="overlays">
                        <div class="overlay"></div>
                        <div class="overlay"></div>
                    </div>
                  </div>
                </div>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
{% endfor %}