<div class="vi-grid">
  <div class="vi-grid__row vi-grid__row--grid-30">
    <div class="col-sm-6 col-lg-3">
      <!-- Area Link  -->
      <div class="vi-area-link vi-pattern vi-pattern--random-gradient-moment">
        <a class="vi-area-link__wrapper" href="#">
          <div class="vi-area-link__title">Selvage gentrify tacos flannel.</div>
        </a>
      </div>
    </div>
    <div class="col-sm-6 col-lg-3">
      <!-- Area Link  -->
      <div class="vi-area-link vi-pattern vi-pattern--random-gradient-moment">
        <a class="vi-area-link__wrapper" href="#">
          <div class="vi-area-link__title">Whatever humblebrag hashtag thundercats meggings.</div>
        </a>
      </div>
    </div>
    <div class="col-sm-6 col-lg-3">
      <!-- Area Link  -->
      <div class="vi-area-link vi-pattern vi-pattern--random-gradient-moment">
        <a class="vi-area-link__wrapper" href="#">
          <div class="vi-area-link__title">Selfies fixie loko.</div>
        </a>
      </div>
    </div>
    <div class="col-sm-6 col-lg-3">
      <!-- Area Link  -->
      <div class="vi-area-link vi-pattern vi-pattern--random-gradient-moment">
        <a class="vi-area-link__wrapper" href="#">
          <div class="vi-area-link__title">Banjo cronut vegan.</div>
        </a>
      </div>
    </div>
  </div>
</div>