{% for face in typefaces %}
<section id="{{ face.id }}" class="usa-section grid-container">
  <h4 class="usa-heading-alt">
    {{ face.name }} (<tt>.font-family-{{ face.id }}</tt>)
  </h4>

  <div class="grid-row grid-gap">
    <div class="tablet:grid-col">
      {{ face.description|raw }}
    </div>

    <div class="font-family-{{ face.id }} typography-{{ face.id }}-intro tablet:grid-col">
      <span class="text-huge">Aa</span>
      <div>
        <p class="text-tiny">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
        <p class="text-tiny">a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
        <p class="text-tiny">0 1 2 3 4 5 6 7 8 9</p>
      </div>
    </div>
  </div>
</section>
{% endfor %}

<style scoped>
  .text-tiny {
    margin: 5px initial 0;
  }

  .text-tiny:first-child {
    margin-top: 0;
  }

  .text-huge {
    font-size: 140px;
    line-height: 1.05;
  }

  .text-tiny {
    font-size: 15px;
  }

  .typography-serif-intro .text-huge {
    font-size: 120px;
    line-height: 1.275;
  }

  .typography-serif-intro .text-tiny {
    font-size: 13px;
  }
</style>