{% extends "page.twig" %}

{% block header_title %}
  <div class="f1">
    {{ site.description }}
  </div>
{% endblock %}

{% block header_content %}
  <div class="flex-l mt4 mb3">
    <div class="w-50-l mb3 mb0-l mr3-l pa3 bg-white">
      <div class="pt1 pb2 ph2">
        {% if not user %}
          {% include "components/join-callout.twig" with { "link": join_link } %}
        {% else %}
          {% include "components/directory-callout.twig" with { "link": directory_link } %}
        {% endif %}
      </div>
    </div>

    <div class="w-50-l ml3-l pa3 bg-white">
      <div class="pt1 pb2 ph2">
        {% include "components/resources-callout.twig" with { "link": resources_link }  %}
      </div>
    </div>
  </div>
{% endblock %}

{% block page_content %}
  <section class="mb5">
    <div class="flex-l nb5-l">
      <div class="order-1 mw6-m w-40-l mb5">
        {% include "components/mini-calendar.twig" %}
      </div>

      <div class="order-0 mb4 mr5-l">
        <div class="mb4">
          {% include "components/title.twig" with { "content": "Latest News" } %}
        </div>

        {% include "components/posts-list.twig" %}
      </div>
    </div>
  </section>
{% endblock %}

{% extends "page.twig" %}

{% block header_title %}
  <div class="f2 f1-l">
    {{ site.description }}
  </div>
{% endblock %}

{% block header_content %}
  <div class="flex-l mt4 mb3">
    <div class="w-50-l mb3 mb0-l mr3-l pa3 bg-white">
      <div class="pt1 pb2 ph2">
        {% if not user %}
          {% include "components/join-callout.twig" with { "link": join_link } %}
        {% else %}
          {% include "components/directory-callout.twig" with { "link": directory_link } %}
        {% endif %}
      </div>
    </div>

    <div class="w-50-l ml3-l pa3 bg-white">
      <div class="pt1 pb2 ph2">
        {% include "components/resources-callout.twig" with { "link": resources_link }  %}
      </div>
    </div>
  </div>
{% endblock %}

{% block page_content %}
  <section class="mb5">
    <div class="flex-l nb5-l">
      <div class="order-1 mw6-m w-40-l mb5">
        {% include "components/mini-calendar.twig" %}
      </div>

      <div class="order-0 mb4 mr5-l">
        <div class="mb4">
          {% include "components/title.twig" with { "content": "Latest News" } %}
        </div>

        {% include "components/posts-list.twig" %}
      </div>
    </div>
  </section>
{% endblock %}

Set smaller font size for homepage heading on small screens
Set smaller font size for homepage heading on small screens
