{% css %}{% include "css/artist-market.css" %}{% endcss %}

<ul id="artists">
  {% for artist in artists | randomize %}
    <li id="{{ artist.data.id }}" class="artist">
      {% if artist.data.img.src and artist.data.img.alt %}
        <div class="fit-contain">
          <img src="/img/artists/{{ artist.data.img.src }}" alt="{{ artist.data.img.alt | createAlt }}">
        </div>
      {% endif %}
      <h3>{{ artist.data.title }}</h3>
      <div class="description">
        {% for paragraph in artist.data.bio %}
          <p>{{ paragraph }}</p>
        {% endfor %}

        {% if artist.data.contacts %}
        <ul>
          {% for contact in artist.data.contacts %}
          <li>
            <a href="{{ contact.href }}" target="_blank">
              {{ contact.title }}
            </a>
          </li>
          {% endfor %}
        </ul>
        {% endif %}
      </div>
    </li>
  {% endfor %}
</ul>