{% comment %}
  would be included using a loop inside a template with liquid product objects available like this:
  {% include 'product-card' with product, parentClass: 'plp__prod-list' , mobile_cpr: 2, tablet_cpr: 3, desktop_cpr: 3 %}
{% endcomment %}

{%- assign title_arr = product.title | split: ' | ' -%}
{%- case title_arr.size -%}
  {%- when 3 -%}
    {%- assign group_name = title_arr[0] -%}
    {%- assign sil_name = title_arr[1] -%}
    {%- assign color_name = title_arr[2] -%}
  {%- else -%}
    {%- assign group_name = null -%}
    {%- assign sil_name = title_arr[0] -%}
    {%- assign color_name = title_arr[1] -%}
{%- endcase -%}

<div class="{{ parentClass }}__prod-card col-{{ 12 | divided_by: mobile_cpr }} col-{{ 12 | divided_by: tablet_cpr }}-md col-{{ 12 | divided_by: desktop_cpr }}-lg">
  <a href="{{ product.url }}" title="{{ product.title }}">
    <div class="{{ parentClass }}__prod-card__img-wrap">
      <img class="{{ parentClass }}__prod-card__img-wrap__img" src="{{ product.images[0] | img_url }}" alt="{{ product.title }}">
    </div>
  </a>
  <div class="{{ parentClass }}__prod-card__details-wrap">
    <a href="{{ product.url }}" title="{{ product.title }}">
    <div class="grp--sm uppercase {{ parentClass }}__prod-card__details-wrap__grp {% if group_name %}grp-title{%- endif -%}">
      {%- if group_name -%}{{ group_name }}{%- else -%}{{ product.vendor }}{%- endif -%}
    </div>
    <div class="{{ parentClass }}__prod-card__details-wrap__silo">
      {{ sil_name }}
    </div>
    </a>
    <div class="{{ parentClass }}__prod-card__details-wrap__price">
      {%- if product.compare_at_price_min > 0 -%}
        {{ product.price | money_without_trailing_zeros }}
        <span class="{{ parentClass }}__prod-card__details-wrap__price__compare-at">{{ product.compare_at_price_min | money_without_trailing_zeros }}</span>
      {%- else -%}
        {{ product.price | money_without_trailing_zeros }}
      {%- endif -%}
    </div>
    <div class="{{ parentClass }}__prod-card__details-wrap__color">
      {{ color_name }}
    </div>
  </div>
</div>