<div class="grid-container">
  <div class="grid-x grid-padding-x align-middle">
    <div class="cell small-12 large-3">
      <!-- Intentionally blank. Used for flexbox justification. -->
    </div>
    <div class="cell small-12 large-6 footer-legal">
      <span>{{ theme.footerLegalText }}</span>
    </div>
    <div class="cell small-12 large-3 footer-social">
      <ul class="menu">
        {% if theme.facebookLink %}
        <li>
          <a href="{{ theme.facebookLink }}" target="_blank"><span class="fa fa-2x fa-facebook-official"></span></a>
        </li>
        {% endif %}
        {% if theme.twitterLink %}
        <li>
          <a href="{{ theme.twitterLink }}" target="_blank"><span class="fa fa-2x fa-twitter"></span></a>
        </li>
        {% endif %}
        {% if theme.instagramLink %}
        <li>
          <a href="{{ theme.instagramLink }}" target="_blank"><span class="fa fa-2x fa-instagram"></span></a>
        </li>
        {% endif %}
      </ul>
    </div>
  </div>
</div>
<div class="grid-container">
  <div class="grid-x grid-padding-x align-middle">
    <div class="cell small-12 large-6 large-offset-3 footer-legal">
      <span>{{ theme.footerLegalText }}</span>
    </div>
    <div class="cell small-12 large-3 footer-social">
      <ul class="menu">
        {% if theme.facebookLink %}
        <li>
          <a href="{{ theme.facebookLink }}" target="_blank"><span class="fa fa-2x fa-facebook-official"></span></a>
        </li>
        {% endif %}
        {% if theme.twitterLink %}
        <li>
          <a href="{{ theme.twitterLink }}" target="_blank"><span class="fa fa-2x fa-twitter"></span></a>
        </li>
        {% endif %}
        {% if theme.instagramLink %}
        <li>
          <a href="{{ theme.instagramLink }}" target="_blank"><span class="fa fa-2x fa-instagram"></span></a>
        </li>
        {% endif %}
      </ul>
    </div>
  </div>
</div>
Remove unnecessary grid cell, use correct css class instead
Remove unnecessary grid cell, use correct css class instead
