<div class="bgc-white br-8 overflow-hidden">
<div class="row max-0 pills-products position-relative">
<div class=" px-0">
<div class="nav flex-column nav-pills bgc-fafafa pay-20 pax-30 c-0d8fc4-h" >
{% for key, category in getCategories() %}
<div data-link
class="d-flex noAnim mab-15 bgc-F2F4F8-h c-9DC771-h position-relative transition pay-12 br-8 pointer w-100 link-img-cat align-items-center c-44515d fs-16 fw-700 tdl-none-h c-0d8fc4-h "
id="v-pills-home-tabCat{{ loop.index }}"
{# data-img="{{ category ? asset(vich_uploader_asset(category, 'categoryFile')) }}"#}
>
<div class="position-relative col-auto">
<img src="{{ asset('assets/img/hexagone-big.svg') }}" alt="hexagone" class="he-44 {{category.position == "1" ? "hexagone-green" : (category.position == "2" ? "hexagone-lightBlue")}} "/>
<img src="{{ asset(vich_uploader_asset(category, 'categoryIconFile')) }}"
alt="{{ category.title }}" class="img-white mahe-28 mawi-28 position-absolute t-0 b-0 w-auto l-0 r-0 m-auto img-white"/>
</div>
<div class="col">
<a class="c-inherit d-block" href="{{ path('front_publications', {'slug':category.slug}) }}"> {{ category.title }}</a>
</div>
{# <div class="position-absolute wi-22 he-22 t-0 b-0 r-20 arrowProduct my-auto d-flex align-items-center jusify-content-center">
<i class="fa-light fa-arrow-right c-9DC771"></i>
</div>#}
</div>
{% endfor %}
</div>
</div>
</div>
</div>