{% assign saving-bg =  %}
  {% capture saving-bg %}{% picture open_graph_1920 pages/{{ page.hardware_section_3.i_bg_image }} %}{% endcapture %}
<section class="hardware_section_3" style="background-image: url({{saving-bg}})">
    <div class="is-container">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h2>{{page.hardware_section_3.t_headline}}</h2>
                <p>{{page.hardware_section_3.t_subheadline}}</p>
            </div>
            <div class="col-md-6">
                {% assign feature_image = '' %}
                {% capture feature_image %}{% picture open_graph pages/{{ page.hardware_section_3.i_image}} %}{% endcapture %}
                <img data-sal="slide-up" data-sal-duration="500" data-sal-ease="ease-in-out" src="{{ feature_image }}" alt="{{ page.hardware_section_2.i_image | remove: '.png' | remove: '.webp' | remove: '.jpg' | replace: '-',' ' | replace: '_',' ' }}">
            </div>
        </div>
        <div class="row">
            {% for item in page.hardware_section_3.features %}
            <div class="col-sm-4 col-md-4">
                <div class="hardware_section_3_items">
                    <h3>{{item.t_headline}}</h3>
                    {% if item.t_subheadline %}
                    <p>{{item.t_subheadline}}</p>
                    {% endif %}
                    {% for feature-list in item.features_list %}
                        <div class="feature-box">
                            {% assign feature_icon = '' %}
                            {% capture feature_icon %}{% picture width_27 pages/{{ feature-list.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' | replace: '-',' ' | replace: '_',' ' }}">
                            <p class="feature-text">{{ feature-list.text }}</p>
                        </div>
                    {% endfor %}
                </div>
            </div>
            {% endfor %}
        </div>
        </div>
</section>