Limit displaying products from event to just 3

Hello,

I am creating a flow email to send out to profiles after they fill out a quiz on our website with their recommended products. I have the following code snippet (below) to display the results in the email, however I would like to limit the number of results shown to just three. Does anybody know a way to edit the code to make this happen?

<table style="width: 100%; table-layout: fixed;">{% for pairGroup in event|lookup:'valueGrouped' %}
<tbody>
<tr>{% for item in pairGroup %}
<td style="width: fit-content; padding: 4px;"><a href="{{ item.url }}" style="display: flex; justify-content: center;"> <img style="width: fit-content; min-width: 100px; max-width: 300px; min-height: 100px; max-height: 300px; object-fit: cover;" src="{{ item.image }}" /> </a></td>
{% endfor %}</tr>
<tr>{% for item in pairGroup %}
<td style="width: fit-content; padding: 0 4px;">
<h3 style="font-size: 16px; margin: unset; text-align: center;">{{ item.title }}</h3>
</td>
{% endfor %}</tr>
<tr>{% for item in pairGroup %}
<td style="width: fit-content; padding: 0 4px; margin-bottom: 4px;">
<h3 style="font-size: 12px; margin: unset; text-align: center;">{{ item.price }}</h3>
</td>
{% endfor %}</tr>
<tr>{% for item in pairGroup %}
<td style="width: fit-content; padding: 4px;">
<div style="display: flex; justify-content: center;"><a href="{{ item.url }}" rel="noopener" style="text-decoration: none !important; color: #fff; background-color: #1d2a22 !important; padding: 10px !important; border-radius: 0px !important;" target="_blank">SHOP NOW</a></div>
</td>
{% endfor %}</tr>
{% endfor %}</tbody>
</table>

Many thanks!

Benji