Search row: Event

<div class="mt-3 mb-1 border-top p-4 pb-0 border-top">
  {% if show_url %}
    {% set classes = [
      "listing-card",
      "listing-card__show"
    ] %}
  {% else %}
  {% set classes = [
    "listing-card",
    "listing-card__cta"
  ] %}
  {% endif %}
  <article class="{{ classes|join(' ') }} search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
    <header class="listing-card--header flex-grow-0">
      {% block image %}
      <img class="img-fluid" src="{{ image }}" alt="Example image">
      {% endblock %}
    </header>
    <div class="listing-card--details listing-card--details__{{ genre_class ?: genre|lower }} border bg-white bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end flex-grow-1">
      {% if genre %}
      <mark class="lozenge lozenge--programme lozenge--programme__{{ genre_class ?: genre|lower }} me-auto">{{ genre }}</mark>
      {% endif %}
      {% if title %}
      <h3 class="fw-bolder fs-4 mt-3 mx-2 mx-sm-3 flex-grow-1">{{ title }}</h3>
      {% endif %}
      {% if company %}
      <p class="mt-1 mx-2 mx-sm-3 flex-grow-1"><small>{{ company }}</small></p>
      {% endif %}
      {% if festival %}
      <p class="text-uppercase m-2 mx-sm-3 my-0">{{ festival }}</p>
      {% endif %}
      {% if dateline %}
      <p class="text-uppercase m-2 m-sm-3 my-0">{{ dateline }}</p>
      {% endif %}
    </div>
    <a href="{{ show_url }}" class="stretched-link" aria-label="More info"></a>
  </article>
</div>