update the team page

src/layouts/team.njk

 {% extends "base.njk" %}
 
      {% block content %}
-        
-        {{content | safe}}
-         
-          <div class="grid">
-            {% for item in team.people %}
+{{content | safe}}
+       <section class="leadershipteam">    
+      
+                    <header class="{{team.management.cardWidth}}">
+                        <h2>{{team.management.title}}</h2>
+                        <!-- <h2>{{team.management.presentation}}</h2> -->
+                    </header>
+            {% for item in team.management.folks %}
                 <div class="grid-item {{item.cardWidth}}">
                         <figure><img src="{{item.portrait}}" alt=""></figure>
                         <h3>{{item.name}}</h3>
@@ -13,16 +16,16 @@
                         <p>{{item.description | markdownify | safe}}</p>
                 </div>
             {% endfor %}
-          </div>
-          
-        <div class="grid board">
-                {% for item in team.board %}
-                    <div class="grid-item {{item.cardWidth}}">
-                        <h2>{{item.title}}</h2>
-                        <h2>{{item.presentation}}</h2>
-                    </div>
-                {% endfor %}
-                {% for item in team.advisory %}
+ </section>
+    
+<section class="board">
+          <header>
+                        <h2>{{team.board.title}}</h2>
+                        <h3>{{team.board.presentation}}</h3>
+                    </header>
+
+        <div class="grid">
+                                 {% for item in team.board.folks %}
                     <div class="grid-item {{item.cardWidth}}">
                         <figure><img src="{{item.portrait}}" alt=""></figure>
                         <h3>{{item.name}}</h3>
@@ -30,8 +33,27 @@
                         <p>{{item.description | markdownify | safe}}</p>
                     </div>
                 {% endfor %}
-          
-        </section>
+                </section>
+
+                <section class="specialists">        
+                <header>
+
+                        <h2>{{team.specialists.title}}</h2>
+                        <h3>{{team.specialists.presentation}}</h3>
+                    </header>
+        <div class="grid specialists">
+            {% for item in team.specialists.folks %}
+                <div class="grid-item {{item.cardWidth}}">
+                        <figure><img src="{{item.portrait}}" alt=""></figure>
+                        <h3>{{item.name}}</h3>
+                        <h4>{{item.fonction}}</h4>
+                        <p>{{item.description | markdownify | safe}}</p>
+                </div>
+            {% endfor %}
+          </div>
+      </section>
+
+  </section>
           
 
      {% endblock %}
@@ -40,53 +62,3 @@
         
 
 
-{# {% extends "base.njk" %}
-
-{% block content %}
-            <section class="editor-in-chief">
-
-                <h2>Editor-in-chief</h2>
-                {% for user in team %}
-                    {% if user.role == "Editor-in-Chief" %}
-                        <img src="{{user.picture}}" alt="portrait of  {{user.name}}"/>
-                        <h2 class="name">{{user.name}}</h2>
-                        <p class="role">{{user.role}}</p>
-                        <p class="structure">{{user.structure}}</p>
-                        <p class="bio">{{user.bio}}</p>
-                        <p class="mail">
-                            <a href="mailto:{{user.email}}">{{user.email}}</a>
-                        </p>
-                    {% endif %}
-
-                {% endfor %}
-            </section>
-            <section class="handlings-editors">
-
-                <h2>Handling Editors</h2>
-                {% for user in team %}
-                    {% if user.role == "Handling Editor" %}
-
-                        <h2 class="name">{{user.name}}</h2>
-                        <p class="role">{{user.role}}</p>
-                        <p class="structure">{{user.structure}}</p>
-                        <p class="bio">{{user.bio}}</p>
-                        <p class="mail">
-                            <a href="mailto:{{user.email}}">{{user.email}}</a>
-                        </p>
-                    {% endif %}
-
-                {% endfor %}
-            </section>
-            {% for user in team %}
-
-                <h2 class="name">{{user.name}}</h2>
-                <p class="role">{{user.role}}</p>
-                <p class="structure">{{user.structure}}</p>
-                <p class="bio">{{user.bio}}</p>
-                <p class="mail">
-                    <a href="mailto:{{user.email}}">{{user.email}}</a>
-                </p>
-
-            {% endfor %}
- 
-    {% endblock %} #}
\ No newline at end of file

src/team.md

 ---
-title: Team
+title: People
 menu: true
 layout: team.njk
 class: team

static/css/theme-coko/main.css

@@ -382,13 +382,30 @@ ul.filter button:hover {
   vertical-align: baseline;
 }
 
+.full 
+{grid-column:  1 / -1}
+
 /* SERVICES ------------------ */
 img.coko-partner {
   grid-column-end: span 3;
 }
 
 /* TEAM --------------------*/
-.team .grid figure {
+.team  main {
+  grid-template-columns: repeat(3, 1fr);
+}
+.team section {
+  grid-column: 1 / -1; 
+  gap: 0 10ch;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.team header {
+  margin-top: 9em;
+  margin-bottom: 0;
+}
+.team figure {
   width: 150px;
   height: 150px;
   border-radius: 50%;
@@ -397,14 +414,16 @@ img.coko-partner {
   filter: grayscale(0.8) brightness(1.1);
   overflow: hidden;
 }
-.team .grid img {
+
+
+.team img {
   width: 100%;
   height: auto;
 }
 img.team-map {
   grid-column-end: span 2;
 }
-.team .board .wide {
+.team .wide {
   grid-column-start: 1;
   grid-column-end: 5;
 }