Overlapping elements within a square grid

Does anybody know how to overlap elements within a square grid by using Foundation 6?

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.0/foundation.css">
<div class="row">
  <div class="small-12 columns">
    <div class="row">
      <div class="small-8 columns end">
        <div class="square dark">
          <div class="content">Square 1</div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="small-6 small-offset-6 columns overlap-top end">
        <div class="square light">
          <div class="content">Square 2</div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="small-4 small-offset-4 columns overlap-top end">
        <div class="square dark">
          <div class="content">Square 3</div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.square {
  background: #f00;
  position: relative;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
}

.dark {
  background: #cbcbcb;
}

.light {
  background: #dedede;
}

.small-6.columns.overlap-top > .square {
  margin-top: calc(-33.3% + 1.33*0.625rem); // one third is 33.3% minus 1.33 times col spacing
}

.small-4.columns.overlap-top > .square {
  margin-top: calc(-50% + 1*0.625rem); // one half is 50% minus 1 times col spacing
}

@media screen and (min-width: 40em) {
  .small-6.columns.overlap-top > .square {
   margin-top: calc(-33.3% + 1.33*0.9375rem);
  }

  .small-4.columns.overlap-top > .square {
    margin-top: calc(-50% + 1*0.9375rem);
  }
}