{{ " " }}
<div class="card" data-style="{{ include.style }}">
  <a
    {% if include.link %}
      href="{{ include.link | relative_url | uri_escape }}"
    {% endif %}
    aria-label="{{ include.title | default: "card link" | regex_strip }}"
    class="card-image"
  >
    <img
      src="{{ include.image | relative_url | uri_escape }}"
      alt="{{ include.title | default: "card image" | regex_strip }}"
      loading="lazy"
      {% include fallback.html %}
    >
  </a>

  <div class="card-text">
    {% if include.title %}
      <a
        {% if include.link %}
          href="{{ include.link | relative_url | uri_escape }}"
        {% endif %}
        {% if include.tooltip %}
          data-tooltip="{{ include.tooltip | xml_escape }}"
        {% endif %}
        class="card-title"
      >
        {{ include.title }}
    </a>
    {% endif %}

    {% if include.subtitle %}
      <span class="card-subtitle">{{ include.subtitle }}</span>
    {% endif %}

    {% if include.description %}
      <p>
        {{ include.description | markdownify | remove: "<p>" | remove: "</p>" }}
      </p>
    {% endif %}

    {% if include.tags or include.repo %}
      {% include tags.html tags=include.tags repo=include.repo %}
    {% endif %}
  </div>
</div>