Patterns: Grid of cards

<div class="o-grid o-grid--of-three o-grid--swipeable">
  <article class="mp c-card c-card--layout-single c-card--size-medium c-card--alt c-card--has-tag c-card--has-image">
    <span class="c-card__tag">News</span>
    <div class="c-card__wrapper">
      <figure class="c-card__image">
        <a href="/prototype/blog-post">
          <img class="" src="/static/img/blog-page-image-1.jpg" alt=""  />
        </a>
      </figure>
      <div class="c-card__primary">
        <header class="c-card__header u-flow--2xs">
          <h2 class="c-h c-card__title"><a href="/prototype/blog-post">Mixing it with the Mastersizer!</a></h2>
        </header>
        <div class="c-card__content u-flow">
          <div class="mp o-prose u-flow--prose u-step--1">
            <p>At a major leading manufacturer of mixing equipment, the Mastersizer particle size analyzer is one of the analytical instruments used by customers during process simulations.</p>
          </div>
        </div>
      </div>
      <a class="u-fill u-fill--link" href="/prototype/blog-post">Mixing it with the Mastersizer!</a>
    </div>
  </article>
  <article class="mp c-card c-card--layout-single c-card--size-medium c-card--alt c-card--has-tag c-card--has-image">
    <span class="c-card__tag">News</span>
    <div class="c-card__wrapper">
      <figure class="c-card__image">
        <a href="/prototype/blog-post">
          <img class="" src="/static/img/blog-page-image-1.jpg" alt=""  />
        </a>
      </figure>
      <div class="c-card__primary">
        <header class="c-card__header u-flow--2xs">
          <h2 class="c-h c-card__title"><a href="/prototype/blog-post">GPC/SEC standards: making them last</a></h2>
        </header>
        <div class="c-card__content u-flow">
          <div class="mp o-prose u-flow--prose u-step--1">
            <p>Earlier this year I highlighted the different types of GPC/SEC standards available and where to find them on our eStore. In this post, I’m going to share some tips and tricks about preparing your standards and making them last. But first, what standard should you be using? In my previous post, I discussed how the […]</p>
          </div>
        </div>
      </div>
      <a class="u-fill u-fill--link" href="/prototype/blog-post">GPC/SEC standards: making them last</a>
    </div>
  </article>
  <article class="mp c-card c-card--layout-single c-card--size-medium c-card--alt c-card--has-tag c-card--has-image">
    <span class="c-card__tag">News</span>
    <div class="c-card__wrapper">
      <figure class="c-card__image">
        <a href="/prototype/blog-post">
          <img class="" src="/static/img/blog-page-image-1.jpg" alt=""  />
        </a>
      </figure>
      <div class="c-card__primary">
        <header class="c-card__header u-flow--2xs">
          <h2 class="c-h c-card__title"><a href="/prototype/blog-post">Viral Vector Vaccines: A Borrowed Technology from Gene Therapy Advancements</a></h2>
        </header>
        <div class="c-card__content u-flow">
          <div class="mp o-prose u-flow--prose u-step--1">
            <p>Advances in recombinant DNA technology, genomics, and immunology have greatly influenced the vaccine development process. The genetic manipulation of viruses makes them suitable as vectors for gene delivery, providing a novel and unique opportunity for vaccine design. Viruses survive and replicate by invading their host’s cells and hijacking their protein-making machinery. These virus particles contain […]</p>
          </div>
        </div>
      </div>
      <a class="u-fill u-fill--link" href="/prototype/blog-post">Viral Vector Vaccines: A Borrowed Technology from Gene Therapy Advancements</a>
    </div>
  </article>
</div>