Open-Coding-Society · anwitabandaru-gif · May 1, 2026 · May 1, 2026 · May 19, 2026 · May 19, 2026
diff --git a/_includes/acs-cancer-infograph.html b/_includes/acs-cancer-infograph.html
@@ -217,7 +217,7 @@
     row-gap: 1.6rem;
     max-width: 980px;
     margin: 0 auto;
-    padding: 0 0.25rem;
+    padding: 0 0 3rem;
   }
   .acs-feature-card {
     background: rgba(255,255,255,0.06);
@@ -234,7 +234,6 @@
   }
   .acs-feature-card img {
     width: 100%;
-    height: 100%;
     object-fit: cover;
     display: block;
   }
@@ -246,15 +245,16 @@
     margin: 0 auto;
   }
   .acs-feature-card--wide img {
-    box-sizing: border-box;
+    box-sizing: fit-content;
     padding: 0.45rem 0.45rem 0;
     border-radius: 12px;
   }
   .acs-feature-body {
-    padding: 0.68rem 0.78rem 0.76rem;
+    padding: 12rem 0.78rem 0.76rem;
   }
   .acs-feature-card:not(.acs-feature-card--wide) .acs-feature-body {
-    padding: 0.64rem 0.74rem 0.7rem;
+    padding: 5rem 0.74rem 0.7rem;
+    align-content: end;
   }
   .acs-feature-title {
     font-size: 0.68rem;
@@ -401,4 +401,38 @@
 
     </div>
 
-  </div>
+    <div class="acs-section-label">Demonstrations</div>
+    <div class="acs-features-grid">
+
+      <div class="acs-feature-card acs-feature-card--wide">
+        <img src="{{ site.baseurl }}/images/capstone/acs/medication.gif" alt="Medication Tracker Demonstration">
+        <div class="acs-feature-body">
+          <div class="acs-feature-title">Medication Tracker</div>
+          <div class="acs-feature-desc">Interactive demonstration of the medication tracking system. Users can log their medications, set reminders, and view detailed information about each drug's effects and potential interactions.</div>
+        </div>
+      </div>
+
+      <div class="acs-feature-card acs-feature-card--wide">
+        <img src="{{ site.baseurl }}/images/capstone/acs/map.gif" alt="Interactive Body Map Demonstration">
+        <div class="acs-feature-body">
+          <div class="acs-feature-title">Body Map Demo</div>
+          <div class="acs-feature-desc">Visual exploration of the interactive body map showing how users can click on body regions to discover cancer types affecting that area. Includes descriptions, risk factors, and direct links to resources.</div>
+        </div>
+      </div>
+
+      <div class="acs-feature-card acs-feature-card--wide">
+        <img src="{{ site.baseurl }}/images/capstone/acs/blog.gif" alt="Community Forum Demonstration">
+        <div class="acs-feature-body">
+          <div class="acs-feature-title">Community Forum Demo</div>
+          <div class="acs-feature-desc">Safe, moderated community space where patients, survivors, and caregivers connect. Features discussion categories for introductions, treatment experiences, advice seeking, research sharing, and resource access with built-in safety guidelines.</div>
+        </div>
+      </div>
+
+      <div class="acs-feature-card acs-feature-card--wide">
+        <img src="{{ site.baseurl }}/images/capstone/acs/medication_notes.gif" alt="Medication Tracker Demonstration">
+        <div class="acs-feature-body">
+          <div class="acs-feature-title">Med Notes Demo</div>
+          <div class="acs-feature-desc">Patient-facing tool for managing treatment journeys. Log daily medications, track adherence patterns, monitor symptoms over time, and generate reports for doctor visits. Includes a digital notebook for recording side effects and observations.</div>
+        </div>
+      </div>
+    </div>
diff --git a/_posts/CSP/2026-04-30-legalandethical.md → .../big-idea-5/2026-04-30-legalandethical.md b/_posts/CSP/2026-04-30-legalandethical.md → .../big-idea-5/2026-04-30-legalandethical.md
@@ -216,7 +216,6 @@ body::after {
   .match-divider { width: 100%; height: 2px; margin: 8px 0; }
 }
 </style>
-</head>
 <body>
 
 <section id="home-screen" class="screen active">

diff --git a/images/capstone/acs/blog.gif b/images/capstone/acs/blog.gif
diff --git a/images/capstone/acs/cellgame.gif b/images/capstone/acs/cellgame.gif
diff --git a/images/capstone/acs/map.gif b/images/capstone/acs/map.gif
diff --git a/images/capstone/acs/medication.gif b/images/capstone/acs/medication.gif
diff --git a/images/capstone/acs/medication_notes.gif b/images/capstone/acs/medication_notes.gif
-Original file line number
+Diff line change
@@ Expand Up / @@ -216,7 +216,6 @@ body::after { @@
       .match-divider { width: 100%; height: 2px; margin: 8px 0; }
     }
     </style>
-    </head>
     <body>
     <section id="home-screen" class="screen active">
@@ Expand Down @@