<div
 class="n7-card grid{% block classes %}{% if classes %} {{ classes }}{% endif %}{% endblock %}
 {% block sideImageClasses %} 
 {% if hasSideImage %} sm:grid-cols-[1fr_1fr] sm:[grid-template-areas:'thumb_content']{% endif %}
 {% if hasRightSideImage %} sm:grid-cols-[1fr_1fr] sm:[grid-template-areas:'content_thumb']{% endif %}
 {% endblock sideImageClasses %}
 {% block fullClickable %}{% if fullClick %} is-card-fullclickable transition hover:ring-2 hover:ring-white/20 group/card{% endif %}{% endblock fullClickable %}
 {% if hasBgImage %} text-white rounded-2xl overflow-hidden {{ cardHeight }}{% endif %}
 {% if boxShadow %} {{ boxShadow }}{% endif %}"
>
{% block image %}
 {% if image %}
 <div class="n7-card__image{% if imageClasses %} {{ imageClasses }}{% endif %}{% if imageSize %} {{ imageSize }}{% endif %}
  {% if hasSideImage or hasRightSideImage %} sm:[grid-area:thumb]{% endif %}">
   <img class="w-full{% if imageAspectRatio %} {{ imageAspectRatio }}{% endif %}{% if img.imgObjectFit %} {{ img.imgObjectFit }}{% else %} object-cover{% endif %} {% if imageFullHeight %} h-full{% endif %}" alt="{{ img.alt }}" src="{{ img.path }}"/>
 </div>
 {% endif %}
{% endblock image %}

 {% if icon %}
   <div class="{%- if hasSideImage or hasRightSideImage %} sm:[grid-area:thumb]{% endif %}{% if iconSize %}{{ iconSize }}{% endif %}{% if iconRadius %} {{ iconRadius }}{% else %} rounded{% endif %} {% if iconBg %} {{ iconBg }}{% else %}n7-background-02{% endif %} p-6">
    {% render '@icon', { id: icon }, true %}
   </div>
 {% endif %}

 {% if hasBgImage %}
  <!-- Immagine di background -->
  <img class="w-full h-full object-cover col-[overlay] row-[overlay] rounded-2xl" alt="{{ img.alt }}" src="{{ img.path }}"/>
  
  <!-- Overlay scuro -->
  <div class="bg-black-overlay w-full h-full col-[overlay] row-[overlay] rounded-2xl"></div>
 {% endif %}

 <div class="n7-card__content grid{% if contentGap %} {{ contentGap }}{% else %} gap-4{% endif %}
   {% if hasBgImage %} col-[overlay] row-[overlay] relative z-10 p-6{% endif %}
   {%- if hasSideImage or hasRightSideImage %} sm:[grid-area:content]{% endif %}{% if contentClasses %} {{ contentClasses }}{% endif %}">
   
   {% block contentWrapperStart %}{% endblock contentWrapperStart %}
   
   <div class="n7-card__heading {{ cardHeadingAlignment }} {% if headingGap %} {{ headingGap }}{% else %} gap-4{% endif %}{% if headingClasses %} {{ headingClasses }}{% endif %}">
     <h3 class="n7-card__title {{ titleClasses }}">
       <a class="hover:underline{% if fullClick %} group-hover/card:underline{% endif %}{% if headingLinkIcon %} flex items-end{% endif %}" href="">
         {{ heading | safe }}
         {% block fileDetails %}
           {% if fileDetails %}
           <span class="flex gap-0.5 items-center pt-1 md:pt-2 text-sm md:text-base font-medium n7-content-03">
             {% render '@icon', { id: 'outline--document-text', size: 'w-4 h-4 md:w-5 md:h-5' }, true %}
             <span class="sr-only">, </span>PDF - 120Kb
           </span>
           {% endif %}
         {% endblock fileDetails %}
         
         {% block headingLinkIcon %}
           {% if headingLinkIcon %}
             {% render '@icon', { id: headingLinkIcon, classes: 'ml-auto', size: 'w-4 h-4 md:w-5 md:h-5' }, true %}
           {% endif %}
         {% endblock headingLinkIcon %}
         
         {% if ctaLink and not fullClick %}<span class="sr-only">: {{ ctaLinkLabel }}</span>{% endif %}
       </a>
     </h3>

     {% block metadatas %}
     {% if category or date %}
       <div class="flex items-baseline justify-between">
         {% block category %}
           {% if category %}
           <div class="n7-card__categories">
             {% render '@category--overline', { text: categoryText, classes: 'n7-content-placeholder'}, true %}
           </div>
           {% endif %}
         {% endblock category %}
         
         {% block date %}
         {% if date %}
         <div class="n7-card__date text-sm">
           <time datetime="2023-09-30">30.09.2023</time>
         </div>
         {% endif %}
         {% endblock date %}
       </div>
     {% endif %}
     {% endblock metadatas %}
   </div>

  {% block content %}
  {% if description %}
    <p class="n7-card__description {{ descriptionClasses }}{% if headingLinkIcon %} pr-8 sm:pr-12{% endif %}">
      {{ description }}
    </p>
  {% endif %}
{% endblock %}

   {% block address %}{% endblock address %}

   {% if ctaLink %}
      {% if fullClick %}
        {% render '@link--sm', { classes: 'n7-card__action-link n7-action-link--has-icon', iconClasses: 'transition-all group-hover/card:translate-x-1', span: true, hasIcon: 'true', icon: ctaIcon, label: ctaLinkLabel } %} 
      {% else %}
        {% render '@link--sm', { classes: 'n7-card__action-link n7-action-link--has-icon', iconClasses: 'transition-all group-hover/card:translate-x-1', hasIcon: 'true', icon: ctaIcon, label: ctaLinkLabel, href: '#', allyHidden: 'true' } %} 
      {% endif %}
    {% endif %}   
  
  
   {% block actionArea %}
     {% if actionArea %}
       <div class="n7-card__action-area {{ ctaWrapperClasses }}">
       {% if fullClick %} 
         {% render '@button--icon-right', { span: true, classes:'cursor-pointer n7-btn--primary', label: 'Card Cta'}, true %} 
       {% else %} 
         {% render '@button--icon-right', { href:'#', classes: 'cursor-pointer n7-btn--primary', label: 'Card Cta'}, true %} 
       {% endif %}
       </div>
     {% endif %}
   {% endblock actionArea %}
  
   {% block chips %}
     {% if chips %}
       <ul class="flex gap-2 flex-wrap mt-auto" aria-label="Categorie">
         {% for i in range(0,4) %}
         <li>{% render '@chip--sm' %}</li>
         {% endfor %}
       </ul>
     {% endif %}
   {% endblock chips %}

   {% block contentWrapperEnd %}{% endblock contentWrapperEnd %}
   {% block additionalContent %}{% endblock additionalContent %}
 </div>
</article>