---
layout: navbar-v2
title: Posts Feed 3x
---

<div id="posts-feed" class="navbar-v2-wrapper">
  <!--Stories-->
  <div class="stories-list">
    <div class="container-inner">
      <a class="story modal-trigger" data-modal="new-story-modal">
        <div class="story-avatar">
          <img
            class="avatar"
            src="https://via.placeholder.com/150x150"
            data-demo-src="assets/img/avatars/jenna.png"
            data-user-popover="0"
            alt=""
          />
          <div class="add-overlay">
            <i data-feather="plus"></i>
          </div>
        </div>
      </a>
      <a class="story">
        <div class="story-avatar">
          <img
            class="avatar"
            src="https://via.placeholder.com/150x150"
            data-demo-src="assets/img/avatars/dan.jpg"
            data-user-popover="1"
            alt=""
          />
        </div>
      </a>
      <a class="story">
        <div class="story-avatar">
          <img
            class="avatar"
            src="https://via.placeholder.com/150x150"
            data-demo-src="assets/img/avatars/bobby.jpg"
            data-user-popover="8"
            alt=""
          />
        </div>
      </a>
      <a class="story">
        <div class="story-avatar">
          <img
            class="avatar"
            src="https://via.placeholder.com/150x150"
            data-demo-src="assets/img/avatars/stella.jpg"
            data-user-popover="2"
            alt=""
          />
        </div>
      </a>
      <a class="story">
        <div class="story-avatar">
          <img
            class="avatar"
            src="https://via.placeholder.com/150x150"
            data-demo-src="assets/img/avatars/milly.jpg"
            data-user-popover="7"
            alt=""
          />
        </div>
      </a>
      <a class="story">
        <div class="story-avatar">
          <img
            class="avatar"
            src="https://via.placeholder.com/150x150"
            data-demo-src="assets/img/avatars/elise.jpg"
            data-user-popover="4"
            alt=""
          />
        </div>
      </a>
      <a class="story">
        <div class="story-avatar">
          <img
            class="avatar"
            src="https://via.placeholder.com/150x150"
            data-demo-src="assets/img/avatars/lana.jpeg"
            data-user-popover="10"
            alt=""
          />
        </div>
      </a>
      <a class="story">
        <div class="story-avatar">
          <img
            class="avatar"
            src="https://via.placeholder.com/150x150"
            data-demo-src="assets/img/avatars/david.jpg"
            data-user-popover="4"
            alt=""
          />
        </div>
      </a>
      <a class="story">
        <div class="story-avatar">
          <img
            class="avatar"
            src="https://via.placeholder.com/150x150"
            data-demo-src="assets/img/avatars/mike.jpg"
            data-user-popover="12"
            alt=""
          />
        </div>
      </a>
      <a class="story">
        <div class="story-avatar">
          <img
            class="avatar"
            src="https://via.placeholder.com/150x150"
            data-demo-src="assets/img/avatars/azzouz.jpg"
            data-user-popover="20"
            alt=""
          />
        </div>
      </a>
    </div>
  </div>

  <!--Posts Grid-->
  <div class="posts-feed-wrapper is-2x">
    <div class="columns is-multiline">
      <!--Post-->
      <div class="column is-4">
        <div class="card post-feed-item">
          <div class="card-image">
            <figure class="image is-4by3">
              <a
                href="https://via.placeholder.com/1600x900"
                data-demo-href="assets/img/demo/unsplash/39.jpg"
                data-fancybox
                data-caption=""
              >
                <img
                  src="https://via.placeholder.com/1600x900"
                  data-demo-src="assets/img/demo/unsplash/39.jpg"
                  alt=""
                />
              </a>
            </figure>
          </div>
          <div class="card-content">
            <div class="media">
              <div class="media-left">
                <div class="post-avatar is-smaller">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/dan.jpg"
                    data-user-popover="1"
                    alt=""
                  />
                </div>
              </div>
              <div class="media-content is-smaller">
                <span>Dan Walker</span>
                <span>17 minutes ago</span>
              </div>
              <div class="media-right">
                <button class="button is-liked">
                  <i data-feather="heart"></i>
                </button>
                <button class="button">
                  <i data-feather="message-circle"></i>
                </button>
                <button class="button">
                  <i data-feather="share-2"></i>
                </button>
                <button class="button">
                  <i data-feather="more-horizontal"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--Post-->
      <div class="column is-4">
        <div class="card post-feed-item">
          <div class="card-image">
            <figure class="image is-4by3">
              <a
                href="https://via.placeholder.com/1600x900"
                data-demo-href="assets/img/demo/unsplash/40.jpg"
                data-fancybox
                data-caption=""
              >
                <img
                  src="https://via.placeholder.com/1600x900"
                  data-demo-src="assets/img/demo/unsplash/40.jpg"
                  alt=""
                />
              </a>
            </figure>
          </div>
          <div class="card-content">
            <div class="media">
              <div class="media-left">
                <div class="post-avatar is-smaller">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/lana.jpeg"
                    data-user-popover="10"
                    alt=""
                  />
                </div>
              </div>
              <div class="media-content is-smaller">
                <span>Lana Henrikssen</span>
                <span>40 minutes ago</span>
              </div>
              <div class="media-right">
                <button class="button">
                  <i data-feather="heart"></i>
                </button>
                <button class="button">
                  <i data-feather="message-circle"></i>
                </button>
                <button class="button">
                  <i data-feather="share-2"></i>
                </button>
                <button class="button">
                  <i data-feather="more-horizontal"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--Post-->
      <div class="column is-4">
        <div class="card post-feed-item">
          <div class="card-image">
            <figure class="image is-4by3">
              <a
                href="https://via.placeholder.com/1600x900"
                data-demo-href="assets/img/demo/unsplash/41.jpg"
                data-fancybox
                data-caption=""
              >
                <img
                  src="https://via.placeholder.com/1600x900"
                  data-demo-src="assets/img/demo/unsplash/41.jpg"
                  alt=""
                />
              </a>
            </figure>
          </div>
          <div class="card-content">
            <div class="media">
              <div class="media-left">
                <div class="post-avatar is-smaller">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/stella.jpg"
                    data-user-popover="2"
                    alt=""
                  />
                </div>
              </div>
              <div class="media-content is-smaller">
                <span>Stella Bergmann</span>
                <span>45 minutes ago</span>
              </div>
              <div class="media-right">
                <button class="button">
                  <i data-feather="heart"></i>
                </button>
                <button class="button">
                  <i data-feather="message-circle"></i>
                </button>
                <button class="button">
                  <i data-feather="share-2"></i>
                </button>
                <button class="button">
                  <i data-feather="more-horizontal"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--Post-->
      <div class="column is-4">
        <div class="card post-feed-item">
          <div class="card-image">
            <figure class="image is-4by3">
              <a
                href="https://via.placeholder.com/1600x900"
                data-demo-href="assets/img/demo/unsplash/42.jpg"
                data-fancybox
                data-caption=""
              >
                <img
                  src="https://via.placeholder.com/1600x900"
                  data-demo-src="assets/img/demo/unsplash/42.jpg"
                  alt=""
                />
              </a>
            </figure>
          </div>
          <div class="card-content">
            <div class="media">
              <div class="media-left">
                <div class="post-avatar is-smaller">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/jenna.png"
                    data-user-popover="0"
                    alt=""
                  />
                </div>
              </div>
              <div class="media-content is-smaller">
                <span>Jenna Davis</span>
                <span>3 hours ago</span>
              </div>
              <div class="media-right">
                <button class="button">
                  <i data-feather="heart"></i>
                </button>
                <button class="button">
                  <i data-feather="message-circle"></i>
                </button>
                <button class="button">
                  <i data-feather="share-2"></i>
                </button>
                <button class="button">
                  <i data-feather="more-horizontal"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--Post-->
      <div class="column is-4">
        <div class="card post-feed-item">
          <div class="card-image">
            <figure class="image is-4by3">
              <a
                href="https://via.placeholder.com/1600x900"
                data-demo-href="assets/img/demo/unsplash/43.jpg"
                data-fancybox
                data-caption=""
              >
                <img
                  src="https://via.placeholder.com/1600x900"
                  data-demo-src="assets/img/demo/unsplash/43.jpg"
                  alt=""
                />
              </a>
            </figure>
          </div>
          <div class="card-content">
            <div class="media">
              <div class="media-left">
                <div class="post-avatar is-smaller">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/elise.jpg"
                    data-user-popover="6"
                    alt=""
                  />
                </div>
              </div>
              <div class="media-content is-smaller">
                <span>Elise Walker</span>
                <span>1 hour ago</span>
              </div>
              <div class="media-right">
                <button class="button is-liked">
                  <i data-feather="heart"></i>
                </button>
                <button class="button">
                  <i data-feather="message-circle"></i>
                </button>
                <button class="button">
                  <i data-feather="share-2"></i>
                </button>
                <button class="button">
                  <i data-feather="more-horizontal"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--Post-->
      <div class="column is-4">
        <div class="card post-feed-item">
          <div class="card-image">
            <figure class="image is-4by3">
              <a
                href="https://via.placeholder.com/1600x900"
                data-demo-href="assets/img/demo/unsplash/46.jpg"
                data-fancybox
                data-caption=""
              >
                <img
                  src="https://via.placeholder.com/1600x900"
                  data-demo-src="assets/img/demo/unsplash/46.jpg"
                  alt=""
                />
              </a>
            </figure>
          </div>
          <div class="card-content">
            <div class="media">
              <div class="media-left">
                <div class="post-avatar is-smaller">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/milly.jpg"
                    data-user-popover="7"
                    alt=""
                  />
                </div>
              </div>
              <div class="media-content is-smaller">
                <span>Milly Augustine</span>
                <span>6 hours ago</span>
              </div>
              <div class="media-right">
                <button class="button is-liked">
                  <i data-feather="heart"></i>
                </button>
                <button class="button">
                  <i data-feather="message-circle"></i>
                </button>
                <button class="button">
                  <i data-feather="share-2"></i>
                </button>
                <button class="button">
                  <i data-feather="more-horizontal"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--Post-->
      <div class="column is-4">
        <div class="card post-feed-item">
          <div class="card-image">
            <figure class="image is-4by3">
              <a
                href="https://via.placeholder.com/1600x900"
                data-demo-href="assets/img/demo/unsplash/44.jpg"
                data-fancybox
                data-caption=""
              >
                <img
                  src="https://via.placeholder.com/1600x900"
                  data-demo-src="assets/img/demo/unsplash/44.jpg"
                  alt=""
                />
              </a>
            </figure>
          </div>
          <div class="card-content">
            <div class="media">
              <div class="media-left">
                <div class="post-avatar is-smaller">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/dan.jpg"
                    data-user-popover="1"
                    alt=""
                  />
                </div>
              </div>
              <div class="media-content is-smaller">
                <span>Dan Walker</span>
                <span>17 minutes ago</span>
              </div>
              <div class="media-right">
                <button class="button is-liked">
                  <i data-feather="heart"></i>
                </button>
                <button class="button">
                  <i data-feather="message-circle"></i>
                </button>
                <button class="button">
                  <i data-feather="share-2"></i>
                </button>
                <button class="button">
                  <i data-feather="more-horizontal"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--Post-->
      <div class="column is-4">
        <div class="card post-feed-item">
          <div class="card-image">
            <figure class="image is-4by3">
              <a
                href="https://via.placeholder.com/1600x900"
                data-demo-href="assets/img/demo/unsplash/45.jpg"
                data-fancybox
                data-caption=""
              >
                <img
                  src="https://via.placeholder.com/1600x900"
                  data-demo-src="assets/img/demo/unsplash/45.jpg"
                  alt=""
                />
              </a>
            </figure>
          </div>
          <div class="card-content">
            <div class="media">
              <div class="media-left">
                <div class="post-avatar is-smaller">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/edward.jpeg"
                    data-user-popover="5"
                    alt=""
                  />
                </div>
              </div>
              <div class="media-content is-smaller">
                <span>Edward Mayers</span>
                <span>5 hours ago</span>
              </div>
              <div class="media-right">
                <button class="button">
                  <i data-feather="heart"></i>
                </button>
                <button class="button">
                  <i data-feather="message-circle"></i>
                </button>
                <button class="button">
                  <i data-feather="share-2"></i>
                </button>
                <button class="button">
                  <i data-feather="more-horizontal"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--Post-->
      <div class="column is-4">
        <div class="card post-feed-item">
          <div class="card-image">
            <figure class="image is-4by3">
              <a
                href="https://via.placeholder.com/1600x900"
                data-demo-href="assets/img/demo/unsplash/4.jpg"
                data-fancybox
                data-caption=""
              >
                <img
                  src="https://via.placeholder.com/1600x900"
                  data-demo-src="assets/img/demo/unsplash/4.jpg"
                  alt=""
                />
              </a>
            </figure>
          </div>
          <div class="card-content">
            <div class="media">
              <div class="media-left">
                <div class="post-avatar is-smaller">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/daniel.jpg"
                    data-user-popover="3"
                    alt=""
                  />
                </div>
              </div>
              <div class="media-content is-smaller">
                <span>Daniel Wellington</span>
                <span>55 minutes ago</span>
              </div>
              <div class="media-right">
                <button class="button is-liked">
                  <i data-feather="heart"></i>
                </button>
                <button class="button">
                  <i data-feather="message-circle"></i>
                </button>
                <button class="button">
                  <i data-feather="share-2"></i>
                </button>
                <button class="button">
                  <i data-feather="more-horizontal"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--Post-->
      <div class="column is-4">
        <div class="card post-feed-item">
          <div class="card-image">
            <figure class="image is-4by3">
              <a
                href="https://via.placeholder.com/1600x900"
                data-demo-href="assets/img/demo/unsplash/37.jpg"
                data-fancybox
                data-caption=""
              >
                <img
                  src="https://via.placeholder.com/1600x900"
                  data-demo-src="assets/img/demo/unsplash/37.jpg"
                  alt=""
                />
              </a>
            </figure>
          </div>
          <div class="card-content">
            <div class="media">
              <div class="media-left">
                <div class="post-avatar is-smaller">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/stella.jpg"
                    data-user-popover="2"
                    alt=""
                  />
                </div>
              </div>
              <div class="media-content is-smaller">
                <span>Stella Bergmann</span>
                <span>8 hours ago</span>
              </div>
              <div class="media-right">
                <button class="button">
                  <i data-feather="heart"></i>
                </button>
                <button class="button">
                  <i data-feather="message-circle"></i>
                </button>
                <button class="button">
                  <i data-feather="share-2"></i>
                </button>
                <button class="button">
                  <i data-feather="more-horizontal"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--Post-->
      <div class="column is-4">
        <div class="card post-feed-item">
          <div class="card-image">
            <figure class="image is-4by3">
              <a
                href="https://via.placeholder.com/1600x900"
                data-demo-href="assets/img/demo/unsplash/47.jpg"
                data-fancybox
                data-caption=""
              >
                <img
                  src="https://via.placeholder.com/1600x900"
                  data-demo-src="assets/img/demo/unsplash/47.jpg"
                  alt=""
                />
              </a>
            </figure>
          </div>
          <div class="card-content">
            <div class="media">
              <div class="media-left">
                <div class="post-avatar is-smaller">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/lana.jpeg"
                    data-user-popover="10"
                    alt=""
                  />
                </div>
              </div>
              <div class="media-content is-smaller">
                <span>Lana Henrikssen</span>
                <span>1 day ago</span>
              </div>
              <div class="media-right">
                <button class="button is-liked">
                  <i data-feather="heart"></i>
                </button>
                <button class="button">
                  <i data-feather="message-circle"></i>
                </button>
                <button class="button">
                  <i data-feather="share-2"></i>
                </button>
                <button class="button">
                  <i data-feather="more-horizontal"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--Post-->
      <div class="column is-4">
        <div class="card post-feed-item">
          <div class="card-image">
            <figure class="image is-4by3">
              <a
                href="https://via.placeholder.com/1600x900"
                data-demo-href="assets/img/demo/unsplash/48.jpg"
                data-fancybox
                data-caption=""
              >
                <img
                  src="https://via.placeholder.com/1600x900"
                  data-demo-src="assets/img/demo/unsplash/48.jpg"
                  alt=""
                />
              </a>
            </figure>
          </div>
          <div class="card-content">
            <div class="media">
              <div class="media-left">
                <div class="post-avatar is-smaller">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/elise.jpg"
                    data-user-popover="6"
                    alt=""
                  />
                </div>
              </div>
              <div class="media-content is-smaller">
                <span>Elise Walker</span>
                <span>2 days ago</span>
              </div>
              <div class="media-right">
                <button class="button is-liked">
                  <i data-feather="heart"></i>
                </button>
                <button class="button">
                  <i data-feather="message-circle"></i>
                </button>
                <button class="button">
                  <i data-feather="share-2"></i>
                </button>
                <button class="button">
                  <i data-feather="more-horizontal"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--Post-->
      <div class="column is-4">
        <div class="card post-feed-item">
          <div class="card-image">
            <figure class="image is-4by3">
              <a
                href="https://via.placeholder.com/1600x900"
                data-demo-href="assets/img/demo/unsplash/49.jpg"
                data-fancybox
                data-caption=""
              >
                <img
                  src="https://via.placeholder.com/1600x900"
                  data-demo-src="assets/img/demo/unsplash/49.jpg"
                  alt=""
                />
              </a>
            </figure>
          </div>
          <div class="card-content">
            <div class="media">
              <div class="media-left">
                <div class="post-avatar is-smaller">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/mike.jpg"
                    data-user-popover="12"
                    alt=""
                  />
                </div>
              </div>
              <div class="media-content is-smaller">
                <span>Mike Lasalle</span>
                <span>2 days ago</span>
              </div>
              <div class="media-right">
                <button class="button is-liked">
                  <i data-feather="heart"></i>
                </button>
                <button class="button">
                  <i data-feather="message-circle"></i>
                </button>
                <button class="button">
                  <i data-feather="share-2"></i>
                </button>
                <button class="button">
                  <i data-feather="more-horizontal"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--Post-->
      <div class="column is-4">
        <div class="card post-feed-item">
          <div class="card-image">
            <figure class="image is-4by3">
              <a
                href="https://via.placeholder.com/1600x900"
                data-demo-href="assets/img/demo/unsplash/50.jpg"
                data-fancybox
                data-caption=""
              >
                <img
                  src="https://via.placeholder.com/1600x900"
                  data-demo-src="assets/img/demo/unsplash/50.jpg"
                  alt=""
                />
              </a>
            </figure>
          </div>
          <div class="card-content">
            <div class="media">
              <div class="media-left">
                <div class="post-avatar is-smaller">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/bobby.jpg"
                    data-user-popover="8"
                    alt=""
                  />
                </div>
              </div>
              <div class="media-content is-smaller">
                <span>Bobby Brown</span>
                <span>3 days ago</span>
              </div>
              <div class="media-right">
                <button class="button">
                  <i data-feather="heart"></i>
                </button>
                <button class="button">
                  <i data-feather="message-circle"></i>
                </button>
                <button class="button">
                  <i data-feather="share-2"></i>
                </button>
                <button class="button">
                  <i data-feather="more-horizontal"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--Post-->
      <div class="column is-4">
        <div class="card post-feed-item">
          <div class="card-image">
            <figure class="image is-4by3">
              <a
                href="https://via.placeholder.com/1600x900"
                data-demo-href="assets/img/demo/unsplash/51.jpg"
                data-fancybox
                data-caption=""
              >
                <img
                  src="https://via.placeholder.com/1600x900"
                  data-demo-src="assets/img/demo/unsplash/51.jpg"
                  alt=""
                />
              </a>
            </figure>
          </div>
          <div class="card-content">
            <div class="media">
              <div class="media-left">
                <div class="post-avatar is-smaller">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/nelly.png"
                    data-user-popover="9"
                    alt=""
                  />
                </div>
              </div>
              <div class="media-content is-smaller">
                <span>Nelly Schwartz</span>
                <span>3 days ago</span>
              </div>
              <div class="media-right">
                <button class="button is-liked">
                  <i data-feather="heart"></i>
                </button>
                <button class="button">
                  <i data-feather="message-circle"></i>
                </button>
                <button class="button">
                  <i data-feather="share-2"></i>
                </button>
                <button class="button">
                  <i data-feather="more-horizontal"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--Post-->
      <div class="column is-4">
        <div class="card post-feed-item">
          <div class="card-image">
            <figure class="image is-4by3">
              <a
                href="https://via.placeholder.com/1600x900"
                data-demo-href="assets/img/demo/unsplash/52.jpg"
                data-fancybox
                data-caption=""
              >
                <img
                  src="https://via.placeholder.com/1600x900"
                  data-demo-src="assets/img/demo/unsplash/52.jpg"
                  alt=""
                />
              </a>
            </figure>
          </div>
          <div class="card-content">
            <div class="media">
              <div class="media-left">
                <div class="post-avatar is-smaller">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/milly.jpg"
                    data-user-popover="7"
                    alt=""
                  />
                </div>
              </div>
              <div class="media-content is-smaller">
                <span>Milly Augustine</span>
                <span>5 days ago</span>
              </div>
              <div class="media-right">
                <button class="button">
                  <i data-feather="heart"></i>
                </button>
                <button class="button">
                  <i data-feather="message-circle"></i>
                </button>
                <button class="button">
                  <i data-feather="share-2"></i>
                </button>
                <button class="button">
                  <i data-feather="more-horizontal"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--Post-->
      <div class="column is-4">
        <div class="card post-feed-item">
          <div class="card-image">
            <figure class="image is-4by3">
              <a
                href="https://via.placeholder.com/1600x900"
                data-demo-href="assets/img/demo/unsplash/53.jpg"
                data-fancybox
                data-caption=""
              >
                <img
                  src="https://via.placeholder.com/1600x900"
                  data-demo-src="assets/img/demo/unsplash/53.jpg"
                  alt=""
                />
              </a>
            </figure>
          </div>
          <div class="card-content">
            <div class="media">
              <div class="media-left">
                <div class="post-avatar is-smaller">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/stella.jpg"
                    data-user-popover="2"
                    alt=""
                  />
                </div>
              </div>
              <div class="media-content is-smaller">
                <span>Stella Bergmann</span>
                <span>5 days ago</span>
              </div>
              <div class="media-right">
                <button class="button">
                  <i data-feather="heart"></i>
                </button>
                <button class="button">
                  <i data-feather="message-circle"></i>
                </button>
                <button class="button">
                  <i data-feather="share-2"></i>
                </button>
                <button class="button">
                  <i data-feather="more-horizontal"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--Post-->
      <div class="column is-4">
        <div class="card post-feed-item">
          <div class="card-image">
            <figure class="image is-4by3">
              <a
                href="https://via.placeholder.com/1600x900"
                data-demo-href="assets/img/demo/unsplash/54.jpg"
                data-fancybox
                data-caption=""
              >
                <img
                  src="https://via.placeholder.com/1600x900"
                  data-demo-src="assets/img/demo/unsplash/54.jpg"
                  alt=""
                />
              </a>
            </figure>
          </div>
          <div class="card-content">
            <div class="media">
              <div class="media-left">
                <div class="post-avatar is-smaller">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/dan.jpg"
                    data-user-popover="1"
                    alt=""
                  />
                </div>
              </div>
              <div class="media-content is-smaller">
                <span>Dan Walker</span>
                <span>6 days ago</span>
              </div>
              <div class="media-right">
                <button class="button is-liked">
                  <i data-feather="heart"></i>
                </button>
                <button class="button">
                  <i data-feather="message-circle"></i>
                </button>
                <button class="button">
                  <i data-feather="share-2"></i>
                </button>
                <button class="button">
                  <i data-feather="more-horizontal"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Load more posts -->
    <div class="load-more-wrap narrow-top has-text-centered">
      <a href="#" class="load-more-button">Load More</a>
    </div>
  </div>
</div>