{% macro feature_project(id, title, tagline, body, stack, image=none, caption='') %}
<article class="feature{{ ' has-figure' if image else '' }}" id="feature-{{ id }}">
  <div class="feature-head">
    <h3>{{ title }}</h3>
    <p class="feature-tagline">{{ tagline }}</p>
  </div>
  {% if image %}
  <figure class="feature-figure feature-clip">
    <img src="{{ url_for('static', filename=image) }}" alt="{{ caption or title }}" loading="lazy" width="1108" height="1017" />
    {% if caption %}<figcaption>{{ caption }}</figcaption>{% endif %}
  </figure>
  {% endif %}
  <div class="feature-body feature-clip" id="feature-{{ id }}-body">
    <div class="prose">
      {{ body | safe }}
    </div>
    {% if stack %}
    <p class="feature-stack"><span class="label">Built with</span> {{ stack | join(', ') }}</p>
    {% endif %}
  </div>
  <button
    class="feature-expand"
    type="button"
    aria-expanded="false"
    aria-controls="feature-{{ id }}-body"
    onclick="toggleFeature(this)"
  >
    <span class="visually-hidden when-closed">Read more about {{ title }}</span>
    <span class="visually-hidden when-open">Collapse {{ title }}</span>
  </button>
</article>
{% endmacro %}