{% assign feature_image = '' %}
{% capture feature_image %}{% picture open_graph pages/{{ page.pos_features.i_image}} %}{% endcapture %}
 {% if page.customize_menu.t_headline %}
{% assign feature_bg_image = '' %}
  {% capture feature_bg_image %}{% picture open_graph_1920 pages/{{ page.pos_features.i_image_bg}} %}{% endcapture %}
{% endif %}
<section class="mb-5 pos_feature_wrap" style="background-image: url('{{ site.baseurl }}{{ feature_bg_image }}')">
  <div class="is-container" data-aos="fade-in" data-aos-duration="700">
    <div class="text-center mx-auto">
      <h3>{{ page.pos_features.title }}</h3>
      <h2 class="mt-2">{{ page.pos_features.subtitle }}</h2>
      <p class="mt-4">{{ page.pos_features.description }}</p>
    </div>
  </div>
    <div class="is-container mt-5 px-3" data-aos="fade-up" data-aos-duration="700">
      <div class="text-center pt-4">
        <img class="mw-100" data-sal="slide-up" data-sal-duration="500" data-sal-ease="ease-in-out" src="{{ feature_image }}" alt="{{ page.pos_features.i_image | remove: '.png' | remove: '.webp' | remove: '.jpg' | replace: '-',' ' | replace: '_',' ' }}">
      </div>

    <div class="row pos_feature_content">
      {% for feature in page.pos_features.features %}
        {% capture feature_icon %}{% picture open_graph pages/{{ feature.icon }} %}{% endcapture %}
      <div class="col-sm-4 col-md-4 mb-4">
      <div class="pos_feature_items_wrap">
          <h3 class="mt-0">{{ feature.name }}</h3>
          <p class="m-0">{{ feature.description }}</p>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>