Airbnb - City guide collage

Demo

<div class="o-row o-row--md">
  <div class="o-col-4@md">
    <a href="#" class="u-d-block tx-no-underline u-mrg-b-8 u-mrg-b-0@md">
      <div class="o-row o-row--xs u-mrg-b-1">
        <div class="o-col-8">
          <div class="c-thumbnail c-thumbnail--square">
            <img src="/images/examples/boston-001.jpg" class="c-thumbnail__image">
          </div>
        </div>
        <div class="o-col-4">
          <div class="c-thumbnail c-thumbnail--square u-mrg-b-1">
            <img src="/images/examples/boston-002.jpg" class="c-thumbnail__image">
          </div>
          <div class="c-thumbnail c-thumbnail--square">
            <img src="/images/examples/boston-003.jpg" class="c-thumbnail__image">
          </div>
        </div>
      </div>
      <div class="t-tx-black">
        <strong>Boston</strong>
        <span class="tx-300 u-mrg-l-2">24820 places</span>
      </div>
    </a>
  </div>
  <div class="o-col-4@md">
    <a href="#" class="u-d-block tx-no-underline u-mrg-b-8 u-mrg-b-0@md">
      <div class="o-row o-row--xs u-mrg-b-1">
        <div class="o-col-8">
          <div class="c-thumbnail c-thumbnail--square">
            <img src="/images/examples/boston-002.jpg" class="c-thumbnail__image">
          </div>
        </div>
        <div class="o-col-4">
          <div class="c-thumbnail c-thumbnail--square u-mrg-b-1">
            <img src="/images/examples/boston-001.jpg" class="c-thumbnail__image">
          </div>
          <div class="c-thumbnail c-thumbnail--square">
            <img src="/images/examples/boston-003.jpg" class="c-thumbnail__image">
          </div>
        </div>
      </div>
      <div class="t-tx-black">
        <strong>Boston</strong>
        <span class="tx-300 u-mrg-l-2">24820 places</span>
      </div>
    </a>
  </div>
  <div class="o-col-4@md">
    <a href="#" class="u-d-block tx-no-underline">
      <div class="o-row o-row--xs u-mrg-b-1">
        <div class="o-col-8">
          <div class="c-thumbnail c-thumbnail--square">
            <img src="/images/examples/boston-003.jpg" class="c-thumbnail__image">
          </div>
        </div>
        <div class="o-col-4">
          <div class="c-thumbnail c-thumbnail--square u-mrg-b-1">
            <img src="/images/examples/boston-002.jpg" class="c-thumbnail__image">
          </div>
          <div class="c-thumbnail c-thumbnail--square">
            <img src="/images/examples/boston-001.jpg" class="c-thumbnail__image">
          </div>
        </div>
      </div>
      <div class="t-tx-black">
        <strong>Boston</strong>
        <span class="tx-300 u-mrg-l-2">24820 places</span>
      </div>
    </a>
  </div>
</div>
<a href="#" class="u-d-block tx-no-underline">
  <div class="o-row o-row--xs u-mrg-b-1">
    <div class="o-col-8">
      <div class="c-thumbnail c-thumbnail--square">
        <img src="/images/examples/boston-001.jpg" class="c-thumbnail__image">
      </div>
    </div>
    <div class="o-col-4">
      <div class="c-thumbnail c-thumbnail--square u-mrg-b-1">
        <img src="/images/examples/boston-002.jpg" class="c-thumbnail__image">
      </div>
      <div class="c-thumbnail c-thumbnail--square">
        <img src="/images/examples/boston-003.jpg" class="c-thumbnail__image">
      </div>
    </div>
  </div>
  <div class="t-tx-black">
    <strong>Boston</strong>
    <span class="tx-300 u-mrg-l-2">24820 places</span>
  </div>
</a>