{% if page.pricing_section.i_pricing_bg %}
{% assign pricing_bg = '' %}
  {% capture pricing_bg %}{% picture open_graph_2000 pages/{{ page.pricing_section.i_pricing_bg}} %}{% endcapture %}
  {% endif %}
<section class="qsr_pricing {{page.pricing_section.p_class}}">
  <div class="custom_container_fluid">
    <div class="payroll_common_container">
      <div class="qsr_pricing_bg" style="background-image: url('{{ site.baseurl }}{{ pricing_bg }}')">
        <h2>{{page.pricing_section.t_headline}}</h2>
        <div class="col-lg-12">
          <div class="row m-0">
            <div class="col-lg-7">
              <div class="qsr_pricing_description">
                <h3>{{page.pricing_section.t_subheadline}}</h3>
                <p>{{page.pricing_section.t_para}}</p>
                <p>{{page.pricing_section.t_para2}}</p>
              </div>
            </div>
            <div class="col-md-5">
              <div class="qsr_pricing_calculation">
                <div class="pricing_per_month">
                  <h4>{{page.pricing_section.v_price}}</h4>
                  <p>{{page.pricing_section.t_price_text}}</p>
                </div>
                <p class="pricing_add">+</p>
                <div class="pricing_per_employee">
                  <h4>{{page.pricing_section.v_price1}}</h4>
                  <p>{{page.pricing_section.t_price_text1}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="qsr_pricing_features {{page.pricing_section.p_class}}">
        <div class="col-lg-12">
          <div class="row m-0">
            {% for items in page.pricing_section.pricing_feature %}
            <div class="col-md-4">
              <div class="qsr_pricing_features_common">
                <div class="pricing_features_common_icon {{items.p_class}}">
                  {% if items.i_image %}
                    {% assign image_alt = items.i_image | split: '.' | first | replace: '-', ' ' | replace: '_', ' ' %}

                    {% if page.pricing_section.p_class_active == true and page.pricing_section.t_picture_tag %}
                      {% picture {{ page.pricing_section.t_picture_tag }} pages/{{ items.i_image }} alt="{{ image_alt }}" %}
                    {% else %}
                      {% picture ecommerce_slide pages/{{ items.i_image }} alt="{{ image_alt }}" %}
                    {% endif %}
                  {% endif %}
                </div>
                <div class="pricing_features_common_desccription">
                  <h3>{{items.t_headline}}</h3>
                  <p>{{items.t_subheadline}}</p>
                  {% if items.p_external == true %}
                  <a href="{{items.p_link}}"
                    aria-current="page"
                    aria-label="{{ items.t_button }} about {{ items.t_headline }}">
                  {% else %}
                    <a href="{% if page.language == 'default' %}{{ site.url }}/{% else %}{{ site.url }}/{{ page.language}}/{% endif %}{{items.p_link}}"
                      aria-current="page"
                      aria-label="{{ items.t_button }} about {{ items.t_headline }}">
                  {% endif %}

                  {{ items.t_button }}

                  <span>
                    <span style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;">
                      about {{ items.t_headline }}
                    </span>

                    {% if items.i_btn_icon %}
                      {% picture btn_icon pages/{{ items.i_btn_icon }} alt="{{ items.t_button }}" %}
                    {% endif %}
                  </span>
                </a>

                </div>
              </div>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
</section>