feat: add abbreviation legend below category header

Author: crfmc

_layouts/people-category.html

@@ -12,7 +12,15 @@
 
     {% for category in site.data.new-categories-order %}
       <div class="category-container">
-        <h2 class="category-header">{{ category }}</h2>
+        <div class="category-header-container">
+          <h2 class="category-header">{{ category }}</h2>
+  
+          {% if category == "Alumni: Masters Students" %}
+            <span class="abbreviations-legend">
+              <b>MBI = Master's in Biomedical Informatics; BIRT = Biomedical Informatics and Data Science Research Training Program</b>
+            </span>
+          {% endif %}
+        </div>
 
         {% assign currentPositionCategory = people_by_category | where: "name" , category | first %}
 

_sass/pages/_people.scss

@@ -8,10 +8,22 @@
             margin-top: 60px;
 
             .category {
-                &-header {
-                    font-weight: 700;
-                    font-size: 1.5rem;
-                    margin-bottom: 20px;
+                &-header-container {
+                    .category-header {
+                        font-weight: 700;
+                        font-size: 1.5rem;
+                        margin-bottom: 20px;
+                    }
+
+                    &:has(.abbreviations-legend) {
+                        .category-header {
+                            margin-bottom: 10px;
+                        }
+                        .abbreviations-legend {
+                            font-size: 0.875rem;
+                        }
+                        margin-bottom: 20px;
+                    }
                 }
                 &-body {
                     display: flex;