{% set popular_stories = [{
  image: "assets/images/stories/256_rsz_euan-carmichael-666378-unsplash.jpg",
  category: "blog",
  title: "Tremblant In Canada",
  avatar: "assets/images/256_luke-porter-261779-unsplash.jpg"
}, {
  image: "assets/images/stories/256_rsz_jared-rice-388260-unsplash.jpg",
  category: "blog",
  title: "Become A Travel Pro In One Easy Lesson",
  avatar: "assets/images/256_michael-dam-258165-unsplash.jpg"
}, {
  image: "assets/images/stories/256_rsz_dex-ezekiel-761373-unsplash.jpg",
  category: "blog",
  title: "A Guide To Rocky Mountain Vacations",
  avatar: "assets/images/256_rsz_1andy-lee-642320-unsplash.jpg"
}] %}

<div class="flex px-3" data-perfect-scrollbar>
  <div class="my-3"><strong class="text-dark-gray">Recent Posts</strong></div>
  {% for item in popular_stories %}
  <div class="card stories-card-popular">
    <img src="{{ item.image }}" alt="" class="card-img">
    <div class="stories-card-popular__content">
      <div class="card-body d-flex align-items-center">
        <div class="avatar-group flex">
          <div class="avatar avatar-xs" data-toggle="tooltip" data-placement="top" title="Janell D.">
            <a href=""><img src="{{ item.avatar }}" alt="Avatar" class="avatar-img rounded-circle"></a>
          </div>
        </div>
        <a style="text-decoration: none;" class="d-flex align-items-center" href=""><i class="material-icons mr-1" style="font-size: inherit;">remove_red_eye</i> <small>327</small></a>
      </div>
      <div class="stories-card-popular__title card-body">
        <small class="text-muted text-uppercase">{{ item.category }}</small>
        <h4 class="card-title m-0"><a href="">{{ item.title }}</a></h4>
      </div>
    </div>
  </div>
  {% endfor %}
</div>