{%- macro render_recipe_list(recipes, limit=0) -%}
  <div class="tile-grid">
  {%- for recipe in recipes -%}
    {%- if limit == 0 or loop.index <= limit -%}
    {%- set img = recipe | title_image(small=True) -%}
    <a href="{{ recipe|url }}">{#--#}
      <div class="recipe-tile">
        
        {#-   overlay on hover and always-visible icons   #}
        <div class="overlay">
          <div class="hover"><div class="time">{{ recipe.time | asDuration(recipe.alt) }}</div></div>
          <div class="icon-bar">
            {%- if 'raw' in recipe.tags -%}<i class="icon raw"></i>{%- endif -%}
            {%- if 'glutenfree' in recipe.tags -%}<i class="icon gf"></i>{%- endif -%}
          </div>
        </div>

        {#-   show image or placeholder text   #}
        {% if img -%}
        <img class="lozad" data-src="{{ img|url }}">
        {%- else -%}
        <div class="placeholder">No Image</div>
        {%- endif -%}

        {#-   recipe title   #}
        <p>{{ recipe.name }}</p>
      </div>{#--#}
    </a>
    {%- endif -%}
  {%- endfor %}
  </div>
{%- endmacro -%}
