---
layout: default
---

{% assign author = site.data.authors[page.author] %}

  <div class="container pt-4">
    <div class="row justify-content-center">
<div class="col-md-6 col-sm-12">
  <div class="site-header pt-0">
            <div class="bg-mobile">
                <p class="caption-10-bold indigo">{{ page.type }}</p>
                <p class="display-20 pt-0 mt-0 mb-1">{{ page.title }}</p>
            {% assign words = page.content | number_of_words %}
            {% if words < 360 %}
            <p class="body-10-bold gray-700">1 min read</p>
            {% else %}
            <p class="body-10-bold gray-700">{{ words | divided_by:150 }} min read</p>
            {% endif %}
            </div>
            <img class="rounded mt-4 mb-3 author-mobile" src="{% if author %}{{ author.image }}{% endif %}" width="64px" height="64px" />
            <p class="body-10 gray-700">{% if author %}{{ author.name }}{% endif %} • {{ page.date | date: "%b %-d, %Y" }}</p>
  </div>
    </div>
  </div>
  </div>


<div class="container">
  <div class="row">
<div class="col-md-6 col-sm-12 offset-md-3 pt-5">
  <article class="post-content">
    {{ content }}
  </article>
</div>
</div>
</div>

<div class="container pt-5">
  <div class="row">
        <div class="col-md-6 col-sm-12 offset-md-3">
            <hr class="mb-5">
            <div class="row">
              <div class="col-md-2 col-sm-12">
                <img class="rounded mb-4" src="{% if author %}{{ author.image }}{% endif %}" width="64px" height="64px" />
              </div>
              <div class="col-md-9">
                <p class="caption-10 black mb-2">{% if author %}By {{ author.name }}{% endif %}</p>
                <p class="body-10 gray-700">{% if author %}{{ author.bio }}{% endif %}</p>
              </div>
            </div>
        </div>
  </div>
</div>


<div class="container pt-5 pb-5">
  <div class="row pb-5">
        <div class="col-md-6 col-sm-12 offset-md-3">
            <hr class="mb-5">
              {% if page.previous.url %}
              <div class="row">
                <div class="col-md-6 offset-md-2">
                  <p class="caption-20 gray-700">Previous post</p>
                </div>
              </div>
              <div class="row">
              <div class="col-md-2 col-sm-12">
                    <a href='{{ page.previous.url | replace:'.html','' }}'><img class="mb-4" src="../../../assets/img/{{ page.previous.image[0] }}" width="75px" height="auto" /></a>
              </div>
               <div class="col-md-9">
                <p class="caption-10-bold indigo mb-0">{{ page.previous.type }}</p>
                <a class="ul-hl display-30" href='{{ page.previous.url | replace:'.html','' }}'>{{ page.previous.title }}</a>
              </div>
            </div>
              {% endif %}
              {% if page.next.url %}
              <div class="row pt-5">
                <div class="col-md-6 offset-md-2">
                  <p class="caption-20 gray-700">Next post</p>
                </div>
              </div>
              <div class="row">
              <div class="col-md-2 col-sm-12">
                    <a href='{{ page.next.url | replace:'.html','' }}'><img class="mb-4" src="../../../assets/img/{{ page.next.image[0] }}" width="75px" height="auto" /></a>
              </div>
              <div class="col-md-9">
                <p class="caption-10-bold indigo mb-0">{{ page.next.type }}</p>
                <a class="ul-hl display-30" href='{{ page.next.url | replace:'.html','' }}'>{{ page.next.title }}</a>
              </div>
            </div>
              {% endif %}
        </div>
  </div>
</div>