{% assign saving-bg =  %}
{% capture saving-bg %}{% picture open_graph_1920 pages/{{ page.hardware_section_5.i_bg_image }} %}{% endcapture %}
<section class="is-container hardware_section_5" style="background-image: url({{saving-bg}})">

    <div class="row align-items-center" data-aos="fade-in" data-aos-duration="700">
    
      <div class="col-sm-6 col-md-6">
        <h2>{{ page.hardware_section_5.t_title }}</h2>
        
        {% for desc in page.hardware_section_5.t_description %}
          <p class="desc-text">{{ desc }}</p>
        {% endfor %}
        
        {% for feature in page.hardware_section_5.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.t_title }}</p>
          </div>
        {% endfor %}
      </div>
      
    </div>
</section>