<section class="overflow-hidden pt-0">
  <div class="container">
    <div class="row">
      <div class="col-lg-8">
        <div class="carousel-container carousel-container-visible">
          <div class="carousel" data-carousel='{"mouseDrag": true, "gutter": 48, "loop": true, "items": 1, "navContainer": "#nav-1","controlsContainer": "#controls-1"}'>
            <div class="item">
              <figure class="figure hover-opacity equal equal-16-10">
                <span class="image" title="Image Title" style="background-image: url('assets/images/coworking-1.jpg')"><span>
                <figcaption class="figure-caption">A caption for the above image.</figcaption>
              </figure>
            </div>

            <div class="item">
              <figure class="figure hover-opacity equal equal-16-10">
                <span class="image" title="Image Title" style="background-image: url('assets/images/coworking-2.jpg')"><span>
                <figcaption class="figure-caption">A caption for the above image.</figcaption>
              </figure>
            </div>

            <div class="item">
              <figure class="figure hover-opacity equal equal-16-10">
                <span class="image" title="Image Title" style="background-image: url('assets/images/coworking-3.jpg')"><span>
                <figcaption class="figure-caption">A caption for the above image.</figcaption>
              </figure>
            </div>

            <div class="item">
              <figure class="figure hover-opacity equal equal-16-10">
                <span class="image" title="Image Title" style="background-image: url('assets/images/coworking-4.jpg')"><span>
                <figcaption class="figure-caption">A caption for the above image.</figcaption>
              </figure>
            </div>
          </div>

          <ul class="carousel-controls" id="controls-1">
            <li class="prev"><i class="icon-chevron-left"></i></li>
            <li class="next"><i class="icon-chevron-right"></i></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <ul class="carousel-nav" id="nav-1">
          <li><span></span></li>
          <li><span></span></li>
          <li><span></span></li>
          <li><span></span></li>
        </ul>
      </div>
    </div>
  </div>
</section>

<section class="overflow-hidden">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="carousel-container carousel-container-visible">


          <div class="carousel" data-carousel='{"gutter": 24, "autoplay": true , "controls": false, "responsive": {"0": {"items": 1}, "768": {"items": 2}, "1200": {"items": 3}}}'>


            <div>
              <a href="" class="card equal equal-2-1 hover-reveal text-white">
                <figure class="image" style="background-image: url('assets/images/small-1.jpg')"></figure>
                <div class="card-body">
                  <div class="text-center text-shadow">
                    <h5 class="mb-0 font-weight-bold">Web Design</h5>
                    <span class="text-secondary">22 Jobs</span>
                  </div>
                </div>
              </a>                  
            </div>

            <div>
              <a href="" class="card equal equal-2-1 hover-reveal text-white">
                <figure class="image" style="background-image: url('assets/images/small-2.jpg')"></figure>
                <div class="card-body">
                  <div class="text-center text-shadow">
                    <h5 class="mb-0 font-weight-bold">Photography</h5>
                    <span class="text-secondary">22 Jobs</span>
                  </div>
                </div>
              </a>
            </div>

            <div>
              <a href="" class="card equal equal-2-1 hover-reveal text-white">
                <figure class="image" style="background-image: url('assets/images/small-4.jpg')"></figure>
                <div class="card-body">
                  <div class="text-center text-shadow">
                    <h5 class="mb-0 font-weight-bold">Development</h5>
                    <span class="text-secondary">22 Jobs</span>
                  </div>
                </div>
              </a>
            </div>

            <div>
              <a href="" class="card equal equal-2-1 hover-reveal text-white">
                <figure class="image" style="background-image: url('assets/images/small-5.jpg')"></figure>
                <div class="card-body">
                  <div class="text-center text-shadow">
                    <h5 class="mb-0 font-weight-bold">Marketing</h5>
                    <span class="text-secondary">22 Jobs</span>
                  </div>
                </div>
              </a>
            </div>

            <div>
              <a href="" class="card equal equal-2-1 hover-reveal text-white">
                <figure class="image" style="background-image: url('assets/images/small-6.jpg')"></figure>
                <div class="card-body">
                  <div class="text-center text-shadow">
                    <h5 class="mb-0 font-weight-bold">Accounting</h5>
                    <span class="text-secondary">22 Jobs</span>
                  </div>
                </div>
              </a>
            </div>

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

</section>