Untitled

	<table width="100%" style="background:#fff;min-width:320px;" cellspacing="0" cellpadding="0">
  <tbody><tr>
    <td>
      <table class="w-100p" width="640" align="center" style="background:#fffffe; max-width:640px;" cellpadding="0" cellspacing="0">
        <tbody><tr>
          <td class="plr-15 pb-40" style="padding:0px 20px 0px;">
            <table width="100%" cellpadding="0" cellspacing="0">
              <tbody><tr>
                <td class="plr-0" align="center" style="padding:0 50px 0px; font:16px/26px Verdana, Geneva, sans-serif, Montserrat; color:#333;">
                  <div class="abandoned">
                    {% for product in products_metadata limit:3 %}
                      <img src="{{ product.item.previewListingMedium[0] }}" class="abandoned_image" />
                      <div class="abandoned_content">
                        <span class="abandoned_title">{{product.item.name}}</span>
                        <span>Quantity: {{product.item.quantity}} - Total: {{product.item.itemPrice.price | money: true, false, currency_id}}</span>
                      </div>
                    {% endfor %}
                  </div>

                </td>
              </tr>
            </tbody></table>
          </td>
        </tr>
      </tbody></table>
    </td>
  </tr>
</tbody></table>

<style>
  .abandoned {
    display: flex;
    justify-content: center;
  }
  
  .abandoned_title {
    font-size: 18px;
    font-weight: bold;
  }
  
  .abandoned_content {
	display: flex;
    flex-direction: column;
  }
  
  .abandoned_image {
    height: 250px;
    width: 250px;
  }
  
  .abandoned_title {
    padding: 12px 0;
  }
</style>