Card: Eventi

<article class="c-card u-flex u-column">

  {% if media %}
    {% if modifier=='wrapped' %} 
      <div class="u-px-base u-pt-base">
    {% endif %}

      <figure class="o-skeleton {% if aspectRatio %}o-skeleton-media--vertical{% else %}o-skeleton-media--horizontal{% endif %} u-relative">
      
        {% if modifier=='overlay' %}<span class="c-card__kicker c-card__kicker--inverse c-card__kicker--generic u-label-02 u-absolute u-py-xxsmall u-px-xsmall">teatro</span>{% endif %}
        <a href="#" class="u-size-full u-absolute u-left u-top {% if modifier=='wrapped' %}c-card__wrapped u-flex u-justify-center u-items-center{% endif %}">
          
          {% if modifier=='overlay' %}
          <span class="c-card__gradient">
            <img class="u-size-full" decoding="async" referrerpolicy="no-referrer" src="{{media}}" loading="lazy" alt="{{title}}">
          </span>
          
          {% else %}

          <img class="{% if modifier=='wrapped' %}c-card__wrapped-item{% else %}u-size-full{% endif %}" decoding="async" referrerpolicy="no-referrer" src="{{media}}" loading="lazy" alt="{{title}}">
          {% endif %}
        </a>
      </figure>
    {% if modifier=='wrapped' %} 
      </div>
   {% endif %}
  {% endif %}


  <div class="c-card__content u-flex u-column u-p-base u-color-secondary">
    <header class="c-card__pull-down">
      {% if label %}
        <span class="c-card__kicker u-label-02 u-mb-xsmall u-block">{{label}}</span>
      {% endif %}
      <a href="#" class="o-link-text u-block">
        <h2 class="c-card__heading u-m-none u-heading-08">{{title}}</h2>
      </a>
      {% if rating %}
        <div class="u-mt-small">
          {% render "@rating" %}
        </div>
      {% endif %}
    </header>

    {% if details %}
      <ul class="c-card__list-details u-p-none u-mb-none u-mt-small u-list-none">
        {% if data %}
          <li class="c-card__item-details u-relative ">
            <svg class="o-icon o-icon--sm u-absolute c-card__icon-top">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-calendar"></use>
            </svg>
            <span class="u-label-07 u-ml-medium u-inline-block">Dal 8 al 28 febbraio 2021</span>
          </li>
        {% endif %}
        {% if adress %}
          <li class="c-card__item-details u-relative ">
            <svg class="o-icon o-icon--sm u-absolute c-card__icon-top">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-map-pin"></use>
            </svg>
            <a class="c-card__link" href="#"><span class="u-label-07 u-ml-medium u-inline-block">Zona: Conca d'Oro / Roma</span></a>
          </li>
        {% endif %}
        {% if info %}
          <li class="c-card__item-details u-relative ">
            <svg class="o-icon o-icon--sm u-absolute c-card__icon-top">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-info"></use>
            </svg>
            <span class="u-label-07 u-ml-medium u-inline-block">Pasticceria fresca Paste Torte Colombe Uova e tutto cio che desiderate</span>
          </li>
        {% endif %}
      </ul>
      {% if modifier=='overlay' %}
        <ul class="u-p-none u-mt-small u-mb-none u-list-none u-flex">
          <li class="u-mr-xxsmall">
            {% render '@badge', {label: "gratis"},true%}
          </li>
          <li class="u-mr-xxsmall">
            {% render '@badge', {label: "finisce oggi"},true%}
          </li>
        </ul>
      {% endif %}

    {% endif %}
  </div>
</article>