Blocks - Clients

<section class="wrapper bg-light wrapper-border">
  <div class="container py-14 py-md-16">
    <p class="text-center mb-8">Trusted by over 2K+ clients across the world</p>
    <div class="swiper-container clients mb-0" data-margin="30" data-dots="false" data-loop="true" data-autoplay="true" data-autoplaytime="1" data-drag="false" data-speed="5000" data-items-xxl="7" data-items-xl="6" data-items-lg="5" data-items-md="4" data-items-xs="2">
      <div class="swiper">
        <div class="swiper-wrapper ticker">
          {% for client in site.data.clients.clients %}
          <div class="swiper-slide px-5">
            {% if client.url and client.url != "#" %}
            <a href="{{ client.url }}">
              <img src="{{ client.image }}" alt="{{ client.name }}" />
            </a>
            {% else %}
            <img src="{{ client.image }}" alt="{{ client.name }}" />
            {% endif %}
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>
              

<section class="wrapper bg-light wrapper-border">
  <div class="container py-14 py-md-16">
    <div class="row gx-lg-8 gx-xl-12 gy-10 gy-lg-0">
      <div class="col-lg-4 mt-lg-2">
        <h2 class="fs-15 text-uppercase text-muted mb-3">Our Clients</h2>
        <h3 class="display-4 mb-3 pe-xxl-5">Trusted by over 300+ clients</h3>
        <p class="lead fs-lg mb-0 pe-xxl-5">We bring solutions to make life easier for our customers.</p>
      </div>
      <div class="col-lg-8">
        <div class="row row-cols-2 row-cols-md-4 gx-0 gx-md-8 gx-xl-12 gy-12">
          {% for client in site.data.clients.clients %}
          <div class="col">
            <figure class="px-3 px-md-0 px-xxl-2">
              {% if client.url and client.url != "#" %}
              <a href="{{ client.url }}">
                <img src="{{ client.image }}" alt="{{ client.name }}" />
              </a>
              {% else %}
              <img src="{{ client.image }}" alt="{{ client.name }}" />
              {% endif %}
            </figure>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>
              

<section class="wrapper bg-light wrapper-border">
  <div class="container py-14 py-md-16">
    <div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
      <div class="col-lg-4">
        <h2 class="fs-15 text-uppercase text-muted mb-3">Our Clients</h2>
        <h3 class="display-4 mb-3">Trusted by over 300+ clients</h3>
        <p class="lead fs-lg mb-0">We bring solutions to make life easier for our customers.</p>
      </div>
      <div class="col-lg-8">
        <div class="row row-cols-2 row-cols-md-4 gx-0 gx-md-8 gx-xl-12 gy-12">
          {% for client in site.data.clients.clients %}
          <div class="col">
            <figure class="px-3 px-md-0 px-xxl-2">
              {% if client.url and client.url != "#" %}
              <a href="{{ client.url }}">
                <img src="{{ client.image }}" alt="{{ client.name }}" />
              </a>
              {% else %}
              <img src="{{ client.image }}" alt="{{ client.name }}" />
              {% endif %}
            </figure>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>