<section class="bg-black text-white">
  <div class="container">
    <div class="row align-items-end">
      <div class="col-lg-6 mb-2 mb-lg-0">
        <h2 class="font-weight-bold">Meet the people behind our project.</h2>
      </div>
      <div class="col-lg-6 text-lg-right">
        <a href="" class="action underline text-primary">View all 28 members<i class="icon-arrow-up-right"></i></a>
      </div>
    </div>
    <div class="row gutter-4 gutter-lg-6">
      <div class="col-md-6 col-lg-4" data-aos="fade-up">
        <a href="" class="card equal equal-3-4 hover-gradient hover-arrow text-white">
          <figure class="image" style="background-image: url('assets/images/team-1.jpg')"></figure>
          <div class="card-footer text-shadow">
            <div>
              <h5 class="mb-0">Michael Doe</h5>
              <span class="text-muted">Creative Director</span>
            </div>
          </div>
        </a>
      </div>
      <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="150">
        <a href="" class="card equal equal-3-4 hover-gradient hover-arrow text-white">
          <figure class="image" style="background-image: url('assets/images/team-2.jpg')"></figure>
          <div class="card-footer text-shadow">
            <div>
              <h5 class="mb-0">Michael Doe</h5>
              <span class="text-muted">Creative Director</span>
            </div>
          </div>
        </a>
      </div>
      <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
        <a href="" class="card equal equal-3-4 hover-gradient hover-arrow text-white">
          <figure class="image" style="background-image: url('assets/images/team-3.jpg')"></figure>
          <div class="card-footer text-shadow">
            <div>
              <h5 class="mb-0">Michael Doe</h5>
              <span class="text-muted">Creative Director</span>
            </div>
          </div>
        </a>
      </div>
      <div class="d-none d-md-block d-lg-none col-md-6 col-lg-4">
        <a href="" class="card equal equal-3-4 hover-gradient hover-arrow text-white">
          <figure class="image" style="background-image: url('assets/images/team-1.jpg')"></figure>
          <div class="card-footer text-shadow">
            <div>
              <h5 class="mb-0">Michael Doe</h5>
              <span class="text-muted">Creative Director</span>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</section>

<section class="bg-black text-white overflow-hidden">
  <div class="container">
    <div class="row align-items-end">
      <div class="col-lg-8 mb-2 mb-lg-0">
        <h2 class="font-weight-bold">The secret for our success are the people behind the screen.</h2>
      </div>
      <div class="col-lg-4 text-lg-right">
        <a href="" class="action underline text-primary">View all 28 members<i class="icon-arrow-up-right"></i></a>
      </div>
    </div>
    <div class="row gutter-4 gutter-lg-6">
      <div class="col">
        <div class="carousel-container carousel-container-visible">
          <div class="carousel" data-carousel='{"controls": false, "responsive": {"0": {"items": 1, "gutter": 24}, "768": {"items": 2}, "1200": {"items": 3, "gutter": 48}}}'>
            <div>
              <a href="" class="card equal equal-3-4 hover-gradient hover-arrow text-white">
                <figure class="image" style="background-image: url('assets/images/team-1.jpg')"></figure>
                <div class="card-footer text-shadow">
                  <div>
                    <h5 class="mb-0">Michael Doe</h5>
                    <span class="text-muted">Creative Director</span>
                  </div>
                </div>
              </a>
            </div>

            <div>
              <a href="" class="card equal equal-3-4 hover-gradient hover-arrow text-white">
                <figure class="image" style="background-image: url('assets/images/team-2.jpg')"></figure>
                <div class="card-footer text-shadow">
                  <div>
                    <h5 class="mb-0">Michael Doe</h5>
                    <span class="text-muted">Creative Director</span>
                  </div>
                </div>
              </a>
            </div>

            <div>
              <a href="" class="card equal equal-3-4 hover-gradient hover-arrow text-white">
                <figure class="image" style="background-image: url('assets/images/team-3.jpg')"></figure>
                <div class="card-footer text-shadow">
                  <div>
                    <h5 class="mb-0">Michael Doe</h5>
                    <span class="text-muted">Creative Director</span>
                  </div>
                </div>
              </a>
            </div>

            <div>
              <a href="" class="card equal equal-3-4 hover-gradient hover-arrow text-white">
                <figure class="image" style="background-image: url('assets/images/team-4.jpg')"></figure>
                <div class="card-footer text-shadow">
                  <div>
                    <h5 class="mb-0">Michael Doe</h5>
                    <span class="text-muted">Creative Director</span>
                  </div>
                </div>
              </a>
            </div>

            <div>
              <a href="" class="card equal equal-3-4 hover-gradient hover-arrow text-white">
                <figure class="image" style="background-image: url('assets/images/team-5.jpg')"></figure>
                <div class="card-footer text-shadow">
                  <div>
                    <h5 class="mb-0">Michael Doe</h5>
                    <span class="text-muted">Creative Director</span>
                  </div>
                </div>
              </a>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</section>