{%- macro render_recipes(recipes) -%}
  <div class="tile-grid">
  {%- for recipe in recipes -%}
    <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   -#}
        {%- set img = recipe | cover_image -%}
        {%- 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>
  {%- endfor %}
  </div>
{%- endmacro -%}
