{% assign versatile_payment1 = page.versatile_payment.i_image %}
  {% capture versatile_payment1 %}{% picture open_graph pages/{{ versatile_payment1 }} %}{% endcapture %}

{% assign versatile_payment2 = page.versatile_payment.i_image2 %}
  {% capture versatile_payment2 %}{% picture open_graph pages/{{ versatile_payment2 }} %}{% endcapture %}

{% assign versatile_payment3 = page.versatile_payment.i_image3 %}
  {% capture versatile_payment3 %}{% picture open_graph pages/{{ versatile_payment3 }} %}{% endcapture %}

<section class="is-container">
<div class="versatile_payment">
  <div class="row">
    <div class="col-md-4">
      <h2 class="m-0">
        {{ page.versatile_payment.t_headline }}
    </h2>
    </div>
    <div class="col-md-4 offset-md-3 text-left">
      <p>
        {{ page.versatile_payment.t_subheadline }}
      </p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <div class="hero-image">
         <img data-sal="slide-up" data-sal-duration="500" data-sal-ease="ease-in-out" src="{{versatile_payment1}}" alt="{{ page.versatile_payment.i_image | remove: '.png' | remove: '.webp' | remove: '.jpg'| replace: '-',' ' | replace: '_',' ' }}">
      </div>
    </div>
    <div class="col-md-4 text-center">
      <div class="hero-image2">
        <img data-sal="slide-up" data-sal-duration="600" data-sal-ease="ease-in-out" src="{{versatile_payment2}}" alt="{{ page.versatile_payment.i_image2 | remove: '.png' | remove: '.webp' | remove: '.jpg'| replace: '-',' ' | replace: '_',' ' }}">
      </div>
    </div>
    <div class="col-md-4">
      <div class="hero-image3">
        <img data-sal="slide-up" data-sal-duration="700" data-sal-ease="ease-in-out" src="{{versatile_payment3}}" alt="{{ page.versatile_payment.i_image3 | remove: '.png' | remove: '.webp' | remove: '.jpg'| replace: '-',' ' | replace: '_',' ' }}">
      </div>
    </div>
  </div>
</div>

</section>