UAL Build: Four-Up blocks

gistfile1.html

      <ul class="blocks four-up">
        <li>
          <div class="media-block region heading-top">
            <h2 class="media-heading-top">Media Heading</h2>
            <figure>
              <a href="#" title="Link title">
                <img src="http://placehold.it/258x212" alt="Image Alt">
              </a>
              <figcaption>Curabitur blandit tempus porttitor, Odio. Original by <a href="#">Lorem Ipsum</a></figcaption>
            </figure>
            <div class="media-body">
              <h2 class="media-heading-bottom">Media Heading</h2>
              <p>Curabitur blandit tempus porttitor. Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p>
              <p class="media-meta">meta</p>
            </div>
          </div>
        </li>        
        <li>
          <div class="media-block region heading-top">
            <h2 class="media-heading-top">Media Heading</h2>
            <figure>
              <a href="#" title="Link title">
                <img src="http://placehold.it/258x212" alt="Image Alt">
              </a>
              <figcaption>Curabitur blandit tempus porttitor, Odio. Original by <a href="#">Lorem Ipsum</a></figcaption>
            </figure>
            <div class="media-body">
              <h2 class="media-heading-bottom">Media Heading</h2>
              <p>Curabitur blandit tempus porttitor. Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p>
              <p class="media-meta">meta</p>
            </div>
          </div>
        </li>        
        <li>
          <div class="media-block region heading-top">
            <h2 class="media-heading-top">Media Heading</h2>
            <figure>
              <a href="#" title="Link title">
                <img src="http://placehold.it/258x212" alt="Image Alt">
              </a>
              <figcaption>Curabitur blandit tempus porttitor, Odio. Original by <a href="#">Lorem Ipsum</a></figcaption>
            </figure>
            <div class="media-body">
              <h2 class="media-heading-bottom">Media Heading</h2>
              <p>Curabitur blandit tempus porttitor. Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p>
              <p class="media-meta">meta</p>
            </div>
          </div>
        </li>        
        <li>
          <div class="media-block region heading-top">
            <h2 class="media-heading-top">Media Heading</h2>
            <figure>
              <a href="#" title="Link title">
                <img src="http://placehold.it/258x212" alt="Image Alt">
              </a>
              <figcaption>Curabitur blandit tempus porttitor, Odio. Original by <a href="#">Lorem Ipsum</a></figcaption>
            </figure>
            <div class="media-body">
              <h2 class="media-heading-bottom">Media Heading</h2>
              <p>Curabitur blandit tempus porttitor. Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p>
              <p class="media-meta">meta</p>
            </div>
          </div>
        </li>
      </ul>