<section>
  <div class="container">
    <div class="row gutter-2 justify-content-between">
      <div class="col-lg-7">
        <h2 class="h1 font-weight-bold">We bring your idea and work for it to became reality.</h2>
      </div>
      <div class="col-md-8 col-lg-4">
        <blockquote class="blockquote mt-1">
          <p>“Working with this guys was one of my best experience since starting my online shop”</p>
          <footer class="blockquote-footer">
            <div class="d-flex align-items-center">
              <img src="assets/images/demo/avatar-1.jpg" alt="Avatar" class="avatar">
              <div class="ml-2">
                <p class="text-black mb-0 lh-1">Valerie Doe</p>
                <small>Creative Lead</small>
              </div>
            </div>
          </footer>
        </blockquote>
      </div>
    </div>
    <div class="row masonry gutter-3 gutter-lg-6">
      <div class="col-md-6" data-aos="fade-up">
        <a href="" class="card equal hover-gradient hover-arrow text-white">
          <figure class="image" style="background-image: url('assets/images/small-1.jpg')"></figure>
          <div class="card-footer text-shadow">
            <div>
              <h5 class="card-title">Ethical Considerations In UX Research: The Need For Training And Review</h5>
            </div>
          </div>
        </a>
      </div>
      <div class="col-md-6" 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/small-2.jpg')"></figure>
          <div class="card-footer text-shadow">
            <div>
              <h5 class="card-title">Ethical Considerations In UX Research: The Need For Training And Review</h5>
            </div>
          </div>
        </a>
      </div>
      <div class="col-md-6" 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/small-5.jpg')"></figure>
          <div class="card-footer text-shadow">
            <div>
              <h5 class="card-title">Ethical Considerations In UX Research: The Need For Training And Review</h5>
            </div>
          </div>
        </a>
      </div>
      <div class="col-md-6" data-aos="fade-up">
        <a href="" class="card equal hover-gradient hover-arrow text-white">
          <figure class="image" style="background-image: url('assets/images/small-11.jpg')"></figure>
          <div class="card-footer text-shadow">
            <div>
              <h5 class="card-title">Ethical Considerations In UX Research: The Need For Training And Review</h5>
            </div>
          </div>
        </a>
      </div>
    </div>
    <div class="row">
      <div class="col-12 text-center">
        <a href="" class="btn btn-outline-primary btn-rounded btn-with-icon">
          <i class="icon-refresh-cw"></i> Load More
        </a>
      </div>
    </div>
  </div>
</section>

<section class="py-0">
  <div class="container">
    <div class="row collage masonry gutter-2 gallery">
      <div class="col-6" data-aos="fade-up">
        <figure class="figure hover-opacity equal">
          <a href="assets/images/small-1.jpg" class="image" title="Image caption" style="background-image: url('assets/images/small-1.jpg')">
          </a>
          <figcaption class="figure-caption">A caption for the above image.</figcaption>
        </figure>
      </div>
      <div class="col-6" data-aos="fade-up">
        <figure class="figure hover-opacity equal equal-4-3">
          <a href="assets/images/small-2.jpg" class="image" title="Image caption" style="background-image: url('assets/images/small-2.jpg')">
          </a>
          <figcaption class="figure-caption">A caption for the above image.</figcaption>
        </figure>
      </div>
      <div class="col-6" data-aos="fade-up">
        <figure class="figure hover-opacity equal">
          <a href="assets/images/small-4.jpg" class="image" title="Image caption" style="background-image: url('assets/images/small-4.jpg')">
          </a>
          <figcaption class="figure-caption">A caption for the above image.</figcaption>
        </figure>
      </div>
      <div class="col-6" data-aos="fade-up">
        <figure class="figure hover-opacity equal equal-4-3">
          <a href="assets/images/small-5.jpg" class="image" title="Image caption" style="background-image: url('assets/images/small-5.jpg')">
          </a>
          <figcaption class="figure-caption">A caption for the above image.</figcaption>
        </figure>
      </div>
      <div class="col-6" data-aos="fade-up">
        <figure class="figure hover-opacity equal">
          <a href="assets/images/small-6.jpg" class="image" title="Image caption" style="background-image: url('assets/images/small-6.jpg')">
          </a>
          <figcaption class="figure-caption">A caption for the above image.</figcaption>
        </figure>
      </div>
      <div class="col-6" data-aos="fade-up">
        <figure class="figure hover-opacity equal equal-1-2">
          <a href="assets/images/small-11.jpg" class="image" title="Image caption" style="background-image: url('assets/images/small-11.jpg')">
          </a>
          <figcaption class="figure-caption">A caption for the above image.</figcaption>
        </figure>
      </div>
      <div class="col-6" data-aos="fade-up">
        <figure class="figure hover-opacity equal">
          <a href="assets/images/small-9.jpg" class="image" title="Image caption" style="background-image: url('assets/images/small-9.jpg')">
          </a>
          <figcaption class="figure-caption">A caption for the above image.</figcaption>
        </figure>
      </div>
    </div>
  </div>
</section>