Modify Shopify search – display product variants, correct pagination

I’m trying to find a way for the following:
I’m modifying a liquid template to also include found product variants on a search result page. But when I do the amount of visible products/product variants on a search results varies greatly and leads to bad UX.

We have a pagination break at 28 items. But this only factors in the amount of products it has already displayed. As I now show variants of the products as well, the pages have a very large amount of items on them. If I decrease the pagination limit to – let’s say 4 – I end up with pages that have exactly 4 entries and pages that have let’s say 500 entries depending on the matching variations for a given search term.

This is the overall goal:
Display product variants in the search result page as well as the default products and still have a correct pagination that display a fixed amount of products/variants/search result items per page.

My approach was this:

{% capture total_results %}
    {%- for result in search.results -%}
        {%- case result.object_type -%}
            {%- when 'product' -%}
                // Go over all the variants and match to the search terms
                // Include product-grid-item template in case it matches
            {%- when 'article' -%}
            {%- when 'page' -%}
        {%- endcase -%}
        <!-- Divider: #### -->
    {%- endfor -%}
{% endcapture %}

{% comment %}Break the captured string at the divider string into an array{% endcomment %}
{%- assign total_results = total_resuls | split: "<!-- Divider: #### -->" -%}

<div class="page__description page__description--centered">
    <span>{{ 'search.general.results_count' | t: count: total_results.size, terms: search_terms }}</span>
</div>

{% paginate total_result by 28 %}
    {% for result in total_resuls %}
        {{ result }}
    {% endfor %}
{% endpaginate %}

I get the following liquid error in the frontend: Array 'total_results' is not paginateable.

Is there a way to make it paginateble?

Or is there a way to modify the search.results collection directly so that the pagination doesn’t only consider the amount of results from the shopify search but also the variations?

The reason we do this btw is that shopify does seem to find the products based on an information where only the variation matches. But in this case it only links to the product and the user whould need to go to the correct variation manually again which is very bad UX.

Even if the user searches by ID directly they get linked to the normal product page. And we want them to be linked directly to the correct variant that was the reason the product was included in the search results in the first place.

Any help would be appreciated. Or pointers on how else I could achieve this.