Zurb Foundation For Sites 6.7.4 Push Footer

Question

I am using Zurb's Foundation for Sites 6.7.4. I would like to push (not sure if that is the correct term) the footer to the bottom of the viewport regardless of content. As it is, the footer always shows immediately following the content. It looks terrible. PLEASE NOTE: I am not looking for a sticky footer.

Here's what I'm working with:

<!-- MAIN CONTENT -->
<section class="grid-container grid-container-padded main-content">
  <form class="contact" method="POST" action="contact.php">
    <h1 class="text-center">
      Contact
    </h1>
    <div class="grid-x grid-margin-x">
      <div class="cell small-12">
        <label>name
          <input id="name" type="text" name="name" autocomplete="name" required>
        </label>
      </div>
      <div class="cell small-12">
        <label>email
          <input type="email" name="email" autocomplete="email" required>
        </label>
      </div>
      <div class="cell small-12">
        <label>message
          <textarea name="message"></textarea>
        </label>
        <button class="submit success button expanded">Send</button>
      </div>
    </div>
  </form>
</section>
      
<!-- FOOTER SECTION -->
<section class="site-footer">
  <div class="wrap">
    &copy;1989&hairsp;-&hairsp;2023
  </div>
</section>


.wrap{
  width: 80%;
  margin: 0 auto;
  color: white;
}

.contact {
  margin-top: 5rem;
}

.site-footer {
  background-color: #074E68;
  overflow: visible;
  padding: 2.5rem 0 2.5rem;
  position: relative;
  text-align: center;
}