Blocks - Team

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row mb-3">
      <div class="col-md-10 col-lg-12 col-xl-10 col-xxl-9 mx-auto text-center">
        <h2 class="fs-15 text-uppercase text-muted mb-3">{{ page.team1.title }}</h2>
        <h3 class="display-4 mb-7 px-lg-19 px-xl-18">{{ page.team1.description }}</h3>
      </div>
    </div>
    <div class="row grid-view gx-md-8 gx-xl-10 gy-8 gy-lg-0">
      {% for member in team_data.members | limit:4 %}
      <div class="col-md-6 col-lg-3">
        <div class="position-relative">
          <div class="shape rounded bg-soft-blue rellax d-md-block" data-rellax-speed="0"
            style="bottom: -0.75rem; right: -0.75rem; width: 98%; height: 98%; z-index:0"></div>
          <div class="card">
            <figure class="card-img-top">
              <img class="img-fluid" src="{{ member.avatar_image }}" 
                   srcset="{{ member.avatar_image2x }} 2x" alt="{{ member.name }}" />
            </figure>
            <div class="card-body px-6 py-5">
              <h4 class="mb-1">{{ member.name }}</h4>
              <p class="mb-0">{{ member.role }}</p>
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

              

team1:
  enable: true
  title: "Our Team"
  subtitle: "Think unique and be innovative. Make a difference with Sandbox."
  description: "Think unique and be innovative. Make a difference with Sandbox."
              

<section  class="wrapper bg-light wrapper-border">
  <div class="container pt-15 pt-md-17 pb-13 pb-md-15">
    <div class="row mb-3">
      <div class="col-md-10 col-xl-9 col-xxl-7 mx-auto text-center">
        <img src="/assets/img/icons/lineal/{{ page.team2.icon }}" class="svg-inject icon-svg icon-svg-md mb-4" alt="" />
        <h2 class="display-4 mb-3 px-lg-14">{{ page.team2.title }}</h2>
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
    <div class="position-relative">
      <div class="shape rounded-circle bg-soft-yellow rellax w-16 h-16" data-rellax-speed="1"
        style="bottom: 0.5rem; right: -1.7rem;"></div>
      <div class="shape rounded-circle bg-line red rellax w-16 h-16" data-rellax-speed="1"
        style="top: 0.5rem; left: -1.7rem;"></div>
      <div class="swiper-container dots-closer mb-6" data-margin="0" data-dots="true" data-items-xxl="4"
        data-items-lg="3" data-items-md="2" data-items-xs="1">
        <div class="swiper">
          <div class="swiper-wrapper">
            {% for member in team_data.members %}
            <div class="swiper-slide">
              <div class="item-inner">
                <div class="card">
                  <div class="card-body">
                    <img class="rounded-circle w-15 mb-4" src="{{ member.avatar_image }}"
                      srcset="{{ member.avatar_image2x }} 2x" alt="{{ member.name }}" />
                    <h4 class="mb-1">{{ member.name }}</h4>
                    <div class="meta mb-2">{{ member.role }}</div>
                    <p class="mb-2">{{ member.bio }}</p>
                    <nav class="nav social mb-0">
                      {% for social in member.social %}
                      <a href="{{ social.url }}"><i class="{{ social.icon }}"></i></a>
                      {% endfor %}
                    </nav>
                    <!-- /.social -->
                  </div>
                  <!--/.card-body -->
                </div>
                <!-- /.card -->
              </div>
              <!-- /.item-inner -->
            </div>
            <!--/.swiper-slide -->
            {% endfor %}
          </div>
          <!--/.swiper-wrapper -->
        </div>
        <!-- /.swiper -->
      </div>
      <!-- /.swiper-container -->
    </div>
    <!-- /.position-relative -->
  </div>
  </section>

              

team2:
  enable: true
  title: "Save your time and money by choosing our professional team."
  icon: "team.svg"
              

<section class="wrapper bg-light">
  <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-line text-primary text-center mb-3">Meet the Team</h2>
        <h3 class="display-5 mb-5">Save your time and money by choosing our professional team.</h3>
        <p>Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros tempus porttitor.</p>
        <a href="#" class="btn btn-primary rounded-pill mt-3">See All Members</a>
      </div>
      <div class="col-lg-8">
        <div class="swiper-container text-center mb-6" data-margin="30" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
          <div class="swiper">
            <div class="swiper-wrapper">
              
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
              

team3:
  enable: true
  title: "Meet the Team"
  subtitle: "Save your time and money by choosing our professional team."
  description: "Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros tempus porttitor."
  button_text: "See All Members"
  button_url: "#"