Layout of members page tweaks

Author: Nitin Gupta

assets/css/main.scss

@@ -41,21 +41,39 @@ html, body {
   color:#ffffff !important;
 }
 
-/* ── Members page — grid + cards ─────────────────────── */
+/* ── Members page: two-column card layout ──────────────────────── */
 
-.members-grid         { display:grid;
-                        grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
-                        gap:2rem 3rem; margin-top:2rem; }
-
-.card-column          { display:flex; flex-direction:column; gap:1rem; }
+/* keep the outer grid that separates groups */
+.members-grid {
+  display: grid;
+  grid-template-columns: 1fr;   /* one group per row */
+  gap: 2rem 3rem;
+  margin-top: 2rem;
+}
 
-.member-card          { display:flex; align-items:center; gap:1rem;
-                        padding:1rem 1.25rem; border:1px solid #e6e4dd;
-                        border-radius:.5rem; background:#fff; }
+/* make the card stacks themselves two columns ≥768 px */
+.card-column {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1rem;
+}
 
-.avatar               { width:56px; height:56px; border-radius:50%;
-                        object-fit:cover; }
+/* mobile fallback → single column */
+@media (max-width: 767px) {
+  .card-column {
+    grid-template-columns: 1fr;
+  }
+}
 
-.info  { line-height:1.3; }
-.name  { font-weight:600; }
-.title { font-size:.875rem; color:#605f5b; }
+/* existing card styling */
+.member-card {                       /* unchanged */
+  display: flex; align-items: center; gap: 1rem;
+  padding: 1rem 1.25rem;
+  border: 1px solid #e6e4dd;
+  border-radius: .5rem;
+  background: #fff;
+}
+.avatar  { width:56px; height:56px; border-radius:50%; object-fit:cover; }
+.info    { line-height:1.3; }
+.name    { font-weight:600; }
+.title   { font-size:.875rem; color:#605f5b; }