Set role in italic in people's cards

_includes/head.html

@@ -8,7 +8,7 @@
     <title>{{ page.title }} - {{ site.title }}</title>
   {%- endif %}
   <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/app.css">
-  <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/custom.css?v=4">
+  <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/custom.css?v=5">
   <link rel="shortcut icon" type="image/png"
     {% if site.favicon %} href="{{ site.favicon | prepend: site.baseurl }}" {% else %} href="{{ site.baseurl }}/favicon.png" {% endif %} />
   <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>

_includes/list-people.html

@@ -249,7 +249,7 @@
                     <div class="card-content">
                         {% if person.name and person.surname %}<p class="title is-spaced is-5">{{ person.name }} {{ person.surname }}</p>{% endif %}
                         {% if role and details contains "role" %}<p class="subtitle role is-4">{{ role }}</p>{% endif %}
-                        {% if type %}<p class="subtitle role is-4">{{ type }}</p>{% endif %}
+                        {% if type %}<p class="subtitle type is-4">{{ type }}</p>{% endif %}
                         {% if details contains "unit" or details contains "institution" or details contains "place" %}
                             {% for affiliation in person.affiliations %}
                                 <div class="affiliation{% if person.affiliations.size > 1 %} more{% endif %}">

assets/css/custom.css

@@ -63,6 +63,10 @@
   -moz-box-shadow: 0 .5em 1em -.125em rgba(10,10,10,0.1),0 0px 0 1px rgba(10,10,10,0.02);
 }
 
+.card.person .role {
+  font-style: italic;
+}
+
 .card:not(.topic):not(.spotlight) .title {
   font-size: 1.2rem;
 }