{% set number_of_posts = 3 %}
{% set posts = blog_recent_posts(module.choose_blog, number_of_posts) %}
{% if module.specific_tag_topic %}
	{% set posts = blog_recent_topic_posts(module.choose_blog, module.tag, number_of_posts) %}
{% endif %}

<section class="blog-feed">
  <ul class="blog-posts">
    {% for post in posts %}
    <li class="blog-post">
      <div class="blog-post-inner">
        <div class="blog-post-image" style="background-image: url({{ resize_image_url( post.featured_image,0,350 ) }});"></div>
        <div class="blog-post-content-wrapper">
          <a class="blog-post-title" href="{{ post.absolute_url }}"><h3>{{ post.name }}</h3></a>
          <a class="blog-post-author" href="{{ group.absolute_url }}/author/{{ post.blog_post_author.slug }}">{{ post.blog_post_author.display_name }}</a>
          <div class="blog-post-date">{{ post.publish_date_localized }}</div>
          <div class="blog-post-summary">{{ post.post_summary }}</div>
          <a class="blog-post-read-more" href="{{ post.absolute_url }}">Read More</a>
        </div>
      </div>
    </li>
    {% endfor %}
  </ul>
</section>

          
        

          
            /* Container */
.blog-posts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
/* Post */
.blog-post {
  flex-basis: 33.333333333%; /* Sets post width */
  display: flex; /* Sets even heights */
}
/* Post Inner: allows margin around content */
.blog-post .blog-post-inner {
  width: 100%;
  background-color: #ebebeb; /* Background Colour */
  margin: 10px; /* Space around post */
}
/* Post Image - Background Image */
.blog-post .blog-post-image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 250px; /* Image Height */
}
/* Post Content */
.blog-post .blog-post-content-wrapper {
  padding: 20px; /* Padding around blog post content */
}
/* Responsive Breakpoints based on HubSpot Boilerplate CSS */
@media (max-width: 767px) {
  .blog-post { flex-basis: 50%; }
}
@media (max-width: 479px) {
  .blog-post { flex-basis: 100%; }
}

          
        

          
            // JavaScript code goes here