{% if project.collaborators %}
                      <div class="col-md-12 mb-2 metadata-item"> {# Add custom class #}
                        <i class="fas fa-users"></i> <strong>Collaborateur·ice·s</strong>:
                        {% for person in project.collaborators %}
                          {{ person }}{% unless forloop.last %}, {% endunless %}{# Display names with commas #}
                        {% endfor %}
                      </div>
                    {% endif %}
                    {% if project.supervision %}
                      <div class="col-md-12 mb-2 metadata-item"> {# Add custom class #}
                      <i class="fas fa-users"></i> <strong>Superviseur·e·s:</strong>
                        {% for supervisor in project.supervision %}
                          {{ supervisor | strip }}{% unless forloop.last %}, {% endunless %}{# Display names with commas #}
                        {% endfor %}
                      </div>
                    {% endif %}
                    {% if project.duration %}
                      <div class="col-md-12 mb-2 metadata-item"> {# Add custom class #}
                        <i class="fas fa-clock"></i> <strong>Durée:</strong> {{ project.duration }}
                      </div>
                    {% endif %}
                    {% if project.funding %}
                      <div class="col-md-12 mb-2 metadata-item"> {# Add custom class #}
                        <i class="fas fa-money-bill-wave"></i> <strong>Financement:</strong> {{ project.funding }}
                      </div>
                    {% endif %}
                  </div>
                </div>

                <!-- Learn More Button -->

  .project-metadata .metadata-item {
    /* Revert to standard block layout and use indentation */
    display: block; /* Ensure it behaves like a block */
    text-indent: -3em; /* Negative indent to pull first line left - adjust as needed */
    padding-left: 3em; /* Corresponding padding for subsequent lines - adjust as needed */
  }

  .project-metadata i {
    margin-right: 0.7rem; /* Space after icon */
    /* Removed flex-shrink */
    text-indent: 0; /* Reset text-indent for icon */
  }

  .project-metadata strong {
    margin-right: 0.5rem; /* Space after label */
    /* Removed flex-shrink */
    text-indent: 0; /* Reset text-indent for label */
  }

  /* Remove specific flexbox alignment rules */
  .project-metadata .metadata-label-icon,
  .project-metadata .metadata-values {
      all: unset; /* Remove all custom styles */
      display: inline; /* Ensure they are inline again */
  }

  /* Remove leftover list styles */
  .project-metadata .metadata-list,
  .project-metadata .metadata-list li {
      all: unset; /* Remove all inherited and user agent styles */
  }

</style>