{# Imagem responsiva. Params: media (Medium|null), alt, ratio (classe), sizes.
   Raster → processado pelo Grav (srcset via derivatives). SVG/sem imagem → fallback. #}
{%- set ext = media ? (media.get('extension')|lower) : '' -%}
<span class="ratio {{ ratio|default('ratio--16x9') }}">
  {% if media and ext in ['jpg','jpeg','png','webp','gif'] %}
    {{ media.derivatives(360, 1280, 220).loading('lazy').decoding('async').html(alt, alt)|raw }}
  {% elseif media %}
    <img src="{{ media.url }}" alt="{{ alt }}" loading="lazy" decoding="async">
  {% else %}
    <span class="placeholder placeholder--brand" aria-hidden="true">
      <svg viewBox="0 0 24 24" fill="currentColor" width="30" height="30"><path d="M21 5v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2zm-2 0H5v9.59l3.3-3.3 3 3 4-4L19 15.6V5zM8.5 7A1.5 1.5 0 1 0 10 8.5 1.5 1.5 0 0 0 8.5 7z"/></svg>
    </span>
  {% endif %}
</span>