<div class="grid text-serif">
  <div class="span-6 box bg-a text-hyphen">
    iaculis eu non diam phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet enim tortor at auctor urna nunc id cursus metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget duis at tellus at urna condimentum mattis pellentesque id nibh tortor id aliquet lectus proin nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas sed tempus urna et pharetra pharetra massa massa ultricies mi quis hendrerit dolor magna eget est lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi
  </div>
  <div class="span-6 box bg-d text-hyphen">
    Si tacuisses, philosophus mansisses.
  </div>
  <div class="span-6 box bg-j text-hyphen">
    Alea iacta est.
  </div>
  <div class="span-6 box bg-o text-hyphen">
    Ave Caesar, morituri te salutant.
  </div>
</div>