Using HUBL for calculated inline CSS

[Amit_95]

I have a tabbed module which by default, shows 6 products. However, when another tab is clicked, it shows 4 products. I.e.

1. Tab Compare all products shows six items.
2. Tab Business only shows four items (because there's only four business products).

Based on this, I'm trying to set the width of the container based on how many items are in its container. I have the PHP for it, but stuggling to convert it into HubL:

$productWidth = 'calc((100% / ' . $numberOfProducts . ') - (5em / ' . $numberOfProducts . ') - 4px)';

HubL:

 {% for item in module.products %}

      <!-- Check how many products exist in total (6) -->
      {% set numberOfProducts = loop.length %}
      
      <!-- Check how many business products exist (4) -->
      {% if item.this_is_a_homeowner_product %}
        {% set numberHomeowner == loop.index %} 
      {% endif %}
    
      {% set first_calc = (100 / numberOfProducts)  %}
      {% set second_calc = ('75' / numberOfProducts) %}
      {% set calc = first_calc - second_calc %}

      {% set productWidth =  (first_calc - second_calc) - 4px %}

      <div class="containerProducts" style="width:{{ productWidth }};"> </div>

{% endfor %}

[MFrankJohnson]

Have you tried to remove the single quotes, so your code reads ??

 {% set second_calc = (75 / numberOfProducts) %}

- see Operators & expression tests