personal-site/blog

<section id="blog" class="mb-4">
  <div class="container">
    <div class="row">
      <div class="bg-light col-12 py-3">
        <div class="bg-white p-4 mb-3 w-100">
          <p class="font-stack-headline text-center text-md-left mb-0">
            Latest blog posts. <span class="font-stack-default text-secondary">New posts published monthly.</span>
          </p>
        </div>

        <div id="latest-posts" class="row mb-n3">
          {% for post in site.posts limit:6 %}
            <div class="col-xs-12 col-md-6 col-lg-4 mb-3">
              <div class="card border-0 h-100">
                <div class="card-body d-flex flex-column">
                  <h5 class="card-title font-stack-headline">
                    {{ post.title }}
                  </h5>

                  <div class="post-date mb-1 text-small">
                    <i class="far fa-calendar-alt"></i> {{ post.date | date: '%B %d, %Y' }}
                  </div>

                  <div class="card-excerpt h-100 mb-3">
                    <p class="card-text">
                      {{ post.excerpt }}&nbsp;
                    </p>
                  </div>

                  <a href="{{ post.url | relative_url }}" title="{{ post.title }}">
                    Read more &raquo;
                  </a>
                </div>
              </div>
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>