{% assign feature_image = '' %}
{% capture feature_image %}{% picture open_graph pages/{{ page.kiosk_section_four.thumbnail}} %}{% endcapture %}

<section class="mb-5 kiosk_section_four">
  <div class="is-container" data-aos="fade-in" data-aos-duration="700">
    <div class="row align-items-center">
    
      <div class="col-sm-6 col-md-6">
        <h2>{{ page.kiosk_section_four.t_title }}</h2>
        
        {% for desc in page.kiosk_section_four.t_description %}
          <p class="desc-text">{{ desc }}</p>
        {% endfor %}
        
        {% for feature in page.kiosk_section_four.features %}
          <div class="feature-box">
            {% assign feature_icon = '' %}
            {% capture feature_icon %}{% picture open_graph pages/{{ feature.icon}} %}{% endcapture %}
            <img data-sal="slide-up" data-sal-duration="500" data-sal-ease="ease-in-out" src="{{ feature_icon }}" alt="{{ feature.icon | remove: '.png' | remove: '.webp' | remove: '.jpg' | remove: '.svg' | replace: '-',' ' | replace: '_',' ' }}">
            <p class="feature-text">{{ feature.text }}</p>
          </div>
        {% endfor %}
      </div>

      <div class="col-sm-6 col-md-6">
        <!-- <img class="terminal" data-sal="slide-up" data-sal-duration="500" data-sal-ease="ease-in-out" src="{{ feature_image }}" alt="{{ page.kiosk_section_four.i_image | remove: '.png' | remove: '.webp' | remove: '.jpg' | replace: '-',' ' | replace: '_',' ' }}"> -->
        {% if page.kiosk_section_four.p_video %}
          <video autoplay muted playsinline preload="none" poster="{{ feature_image }}" class="terminal">
          <source src="{{ site.url }}/assets/videos/{{ page.kiosk_section_four.p_video }}" type="video/mp4"/>
          </video>
        {% endif %}
      </div>
      
    </div>
  </div>
</section>