Foundation XY-Grid Vertical and Horizontal Text Alignment in Four Square Card

I'm wanting to display a four-square card with content centered horizontally and vertically in all four cells. I'm struggling figuring out how to do so using the Flexbox Utilities documentation

I have a codepen prepared as a starting point:

https://codepen.io/dhildreth/pen/GRRZeQa

Here's the essential HTML from that codepen:

<div class="grid-x grid-margin-x text-center">
  <div class="cell auto">
    <div class="card">
      <div class="grid-y grid-frame">
        <div class="cell medium-6">
          <div class="grid-x grid-padding-x align-middle">
            <div class="cell auto">
              Cell 1
            </div>
            <div class="cell auto">
              Cell 2
            </div>
          </div>
        </div>
        <div class="cell medium-6">
          <div class="grid-x grid-padding-x align-middle">
            <div class="cell auto">
              Cell 3
            </div>
            <div class="cell auto">
              Cell 4
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

It's entirely possible I'm making this more complicated than it needs to be. I was just hoping for something responsive and Foundation-esque. I could revert to using a table if I must, but I'd think there should be some sort of easy way to align the text vertically.

Thanks in advance!