Portfolio Components in Metis library

<section class="section">
  <div class="container">
    <div class="is-max-w-md mx-auto mb-6 has-text-centered">
      <span class="tag is-info is-rounded">Lorem ipsum</span>
      <h2 class="mt-4 title is-spaced">Lorem ipsum dolor sit amet consectutar domor</h2>
      <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
    </div>
    <div class="columns">
      <div class="column is-6">
        <div class="columns is-multiline is-mobile">
          <div class="column is-6 pt-0" style="height: 256px;">
            <img class="is-radius" style="object-fit: cover; height: 100%;" src="https://images.unsplash.com/photo-1464655646192-3cb2ace7a67e?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          </div>
          <div class="column is-6 pt-0" style="height: 256px;">
            <img class="is-radius" style="object-fit: cover; height: 100%;" src="https://images.unsplash.com/photo-1529513342590-3b342bb7dd67?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          </div>
          <div class="column is-6 pb-0" style="height: 256px;">
            <img class="is-radius" style="object-fit: cover; height: 100%;" src="https://images.unsplash.com/photo-1489058535093-8f530d789c3b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          </div>
          <div class="column is-6 pb-0" style="height: 256px;">
            <img class="is-radius" style="object-fit: cover; height: 100%;" src="https://images.unsplash.com/photo-1602883440931-c268da6122b0?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          </div>
        </div>
      </div>
      <div class="column is-6 pt-0">
        <img class="is-radius" style="height: 512px; object-fit: cover; width: 100%;" src="https://images.unsplash.com/photo-1501769214405-5e5ee5125a02?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
      </div>
    </div>
    <div class="columns is-vcentered">
      <div class="column is-6">
        <img class="is-radius" style="height: 512px; object-fit: cover; width: 100%;" src="https://images.unsplash.com/photo-1501769214405-5e5ee5125a02?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
      </div>
      <div class="column is-6">
        <div class="columns is-multiline is-mobile">
          <div class="column is-6 pt-0" style="height: 256px;">
            <img class="is-radius" style="object-fit: cover; height: 100%;" src="https://images.unsplash.com/photo-1464655646192-3cb2ace7a67e?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          </div>
          <div class="column is-6 pt-0" style="height: 256px;">
            <img class="is-radius" style="object-fit: cover; height: 100%;" src="https://images.unsplash.com/photo-1529513342590-3b342bb7dd67?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          </div>
          <div class="column is-6 pb-0" style="height: 256px;">
            <img class="is-radius" style="object-fit: cover; height: 100%;" src="https://images.unsplash.com/photo-1489058535093-8f530d789c3b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          </div>
          <div class="column is-6 pb-0" style="height: 256px;">
            <img class="is-radius" style="object-fit: cover; height: 100%;" src="https://images.unsplash.com/photo-1602883440931-c268da6122b0?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-5">
  <div class="container">
    <div class="row mb-5">
      <div class="col-12 col-lg-5 mx-auto text-center">
        <span class="badge mb-3 bg-primary py-2 x-3 rounded-pill">Lorem ipsum</span>
        <h2 class="mb-3 fs-1 fw-bold">Lorem ipsum dolor sit amet consectutar domor</h2>
        <p class="mb-0 text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-lg-10 mx-auto">
        <div class="row mb-2">
          <div class="col-12 col-lg-6">
            <div class="row d-flex flex-wrap">
              <div class="col-6 py-2">
                <img class="img-fluid rounded" src="https://images.unsplash.com/photo-1464655646192-3cb2ace7a67e?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
              </div>
              <div class="col-6 py-2">
                <img class="img-fluid rounded" src="https://images.unsplash.com/photo-1529513342590-3b342bb7dd67?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
              </div>
              <div class="col-6 py-2">
                <img class="img-fluid rounded" src="https://images.unsplash.com/photo-1489058535093-8f530d789c3b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
              </div>
              <div class="col-6 py-2">
                <img class="img-fluid" src="https://images.unsplash.com/photo-1602883440931-c268da6122b0?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
              </div>
            </div>
          </div>
          <div class="col-12 col-lg-6 py-2">
            <img class="img-fluid rounded" style="max-height: 350px; width: 100%;" src="https://images.unsplash.com/photo-1501769214405-5e5ee5125a02?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=698&amp;q=80" alt="">
          </div>
        </div>
        <div class="row">
          <div class="col-12 col-lg-6 py-2">
            <img class="img-fluid rounded" style="max-height: 350px; width: 100%" src="https://images.unsplash.com/photo-1501769214405-5e5ee5125a02?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=698&amp;q=80" alt="">
          </div>
          <div class="col-12 col-lg-6 order-first order-lg-last">
            <div class="row">
              <div class="col-6 py-2">
                <img class="img-fluid rounded" src="https://images.unsplash.com/photo-1464655646192-3cb2ace7a67e?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
              </div>
              <div class="col-6 py-2">
                <img class="img-fluid rounded" src="https://images.unsplash.com/photo-1529513342590-3b342bb7dd67?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
              </div>
              <div class="col-6 py-2">
                <img class="img-fluid rounded" src="https://images.unsplash.com/photo-1489058535093-8f530d789c3b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
              </div>
              <div class="col-6 py-2">
                <img class="img-fluid rounded" src="https://images.unsplash.com/photo-1602883440931-c268da6122b0?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 md:py-20">
  <div class="container px-4 mx-auto">
    <div class="max-w-lg mx-auto mb-12 text-center">
      <span class="inline-block py-1 px-3 text-xs font-semibold bg-blue-100 text-blue-600 rounded-xl">Lorem ipsum</span>
      <h2 class="text-3xl md:text-4xl mt-2 mb-4 font-bold font-heading">Lorem ipsum dolor sit amet consectutar domor</h2>
      <p class="text-blueGray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
    </div>
    <div class="flex flex-wrap -mx-3 mb-6 lg:mb-0">
      <div class="w-full lg:w-1/2 flex flex-wrap px-3 mb-6 lg:md-0">
        <div class="w-1/2 h-64 pr-3 pb-3">
          <img class="h-full object-cover rounded" src="https://images.unsplash.com/photo-1464655646192-3cb2ace7a67e?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </div>
        <div class="w-1/2 h-64 pl-3 pb-3">
          <img class="h-full object-cover rounded" src="https://images.unsplash.com/photo-1529513342590-3b342bb7dd67?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </div>
        <div class="w-1/2 h-64 pr-3 pt-3">
          <img class="h-full object-cover rounded" src="https://images.unsplash.com/photo-1489058535093-8f530d789c3b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </div>
        <div class="w-1/2 h-64 pl-3 pt-3">
          <img class="h-full object-cover rounded" src="https://images.unsplash.com/photo-1602883440931-c268da6122b0?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-3">
        <img class="h-128 w-full object-cover rounded" src="https://images.unsplash.com/photo-1501769214405-5e5ee5125a02?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=698&amp;q=80" alt="">
      </div>
    </div>
    <div class="flex flex-wrap -mx-3 mb-6">
      <div class="w-full lg:w-1/2 px-3 order-last lg:order-first mt-6 lg:mt-0">
        <img class="h-128 w-full object-cover rounded" src="https://images.unsplash.com/photo-1501769214405-5e5ee5125a02?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=698&amp;q=80" alt="">
      </div>
      <div class="w-full lg:w-1/2 flex flex-wrap px-3">
        <div class="w-1/2 h-64 pr-3 pb-3">
          <img class="h-full object-cover rounded" src="https://images.unsplash.com/photo-1464655646192-3cb2ace7a67e?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </div>
        <div class="w-1/2 h-64 pl-3 pb-3">
          <img class="h-full object-cover rounded" src="https://images.unsplash.com/photo-1529513342590-3b342bb7dd67?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </div>
        <div class="w-1/2 h-64 pr-3 pt-3">
          <img class="h-full object-cover rounded" src="https://images.unsplash.com/photo-1489058535093-8f530d789c3b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </div>
        <div class="w-1/2 h-64 pl-3 pt-3">
          <img class="h-full object-cover rounded" src="https://images.unsplash.com/photo-1602883440931-c268da6122b0?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </div>
      </div>
    </div>
  </div>
</section>