Tightened the Project Details / Series Dashboard stats strip so the 9 summary tiles use a dedicated responsive grid:

PlotLine/Views/Projects/Details.cshtml

@@ -71,10 +71,10 @@
 }
 
 <section class="mb-3" aria-label="Series summary">
-    <div class="row g-2">
+    <div class="dashboard-summary-grid">
         @foreach (var card in summaryCards)
         {
-            <div class="col-6 col-md-4 col-xl-2">
+            <div>
                 <div class="card h-100 dashboard-summary-card @card.Item3">
                     <div class="card-body dashboard-summary-body">
                         <p class="eyebrow dashboard-summary-label">@card.Item1</p>

PlotLine/wwwroot/css/site.css

@@ -470,20 +470,27 @@ td.text-end {
   border-color: var(--plotline-line);
 }
 
+.dashboard-summary-grid {
+  display: grid;
+  grid-template-columns: repeat(9, minmax(0, 1fr));
+  gap: 8px;
+}
+
 .dashboard-summary-body {
-  padding: 10px 12px;
+  padding: 8px 9px;
 }
 
 .dashboard-summary-label {
-  margin-bottom: 4px;
+  margin-bottom: 3px;
-  font-size: 0.7rem;
+  font-size: 0.64rem;
   line-height: 1.15;
 }
 
 .dashboard-summary-value {
   display: block;
-  font-size: 1.45rem;
+  font-size: 1.25rem;
   line-height: 1;
+  overflow-wrap: anywhere;
 }
 
 .dashboard-summary-calm {
@@ -501,6 +508,24 @@ td.text-end {
   background: rgba(252, 241, 246, 0.7);
 }
 
+@media (max-width: 1199.98px) {
+  .dashboard-summary-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 767.98px) {
+  .dashboard-summary-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 420px) {
+  .dashboard-summary-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
 .dashboard-progress-card {
   border-color: rgba(47, 111, 99, 0.18);
   background: linear-gradient(180deg, #ffffff 0%, rgba(238, 245, 242, 0.64) 100%);