fix home page display snd styling

app/Views/index.php

@@ -217,7 +217,13 @@
         .ticker-track {
             display: flex;
             width: max-content;
-            animation: ticker-scroll 10s linear infinite;
+            animation: ticker-scroll 17s linear infinite;
+            will-change: transform;
+        }
+
+        .ticker-sequence {
+            display: flex;
+            flex: 0 0 auto;
         }
 
         .careers-ticker:hover .ticker-track,
@@ -229,6 +235,7 @@
         .ticker-group {
             display: flex;
             align-items: center;
+            flex: 0 0 auto;
             min-width: max-content;
         }
 
@@ -262,7 +269,7 @@
         }
 
         @keyframes ticker-scroll {
-            from { transform: translateX(100vw); }
+            from { transform: translateX(0); }
             to { transform: translateX(-50%); }
         }
 
@@ -424,12 +431,51 @@
         @media (max-width: 900px) {
             .story-block, .story-block.reverse {
                 flex-direction: column;
+                gap: 1.5rem;
             }
             .story-media {
                 min-height: 260px;
             }
         }
 
+        @media (max-width: 576px) {
+            .section {
+                padding: 2.25rem 0;
+            }
+
+            .section-tight {
+                padding: 2rem 0;
+            }
+
+            .container-narrow {
+                padding: 0 1rem;
+            }
+
+            .stats-band h2 {
+                margin-bottom: 1.5rem;
+            }
+
+            .story-block, .story-block.reverse {
+                gap: 1.15rem;
+            }
+
+            .story-text {
+                padding: 0;
+            }
+
+            .story-text p:last-child {
+                margin-bottom: 0;
+            }
+
+            .story-media {
+                min-height: 220px;
+            }
+
+            .curriculum-image {
+                min-height: 220px;
+            }
+        }
+
         /* Curriculum block */
         .curriculum-section {
             background-color: var(--sage);
@@ -600,18 +646,22 @@
     ?>
     <a class="careers-ticker" href="<?= site_url('careers') ?>" aria-label="View open volunteer positions">
         <div class="ticker-track">
-            <?php for ($copy = 0; $copy < 2; $copy++): ?>
-                <div class="ticker-group" <?= $copy === 1 ? 'aria-hidden="true"' : '' ?>>
-                    <span class="ticker-label">Now recruiting volunteers</span>
-                    <?php foreach ($tickerItems as $item): ?>
-                        <span class="ticker-item">
-                            <span class="ticker-title"><?= esc($item['title']) ?></span>
-                            <?php if ($item['meta'] !== ''): ?>
-                                <span class="ticker-meta"><?= esc($item['meta']) ?></span>
-                            <?php endif; ?>
-                            <i class="fa fa-arrow-right" aria-hidden="true"></i>
-                        </span>
-                    <?php endforeach; ?>
+            <?php for ($sequence = 0; $sequence < 2; $sequence++): ?>
+                <div class="ticker-sequence" <?= $sequence === 1 ? 'aria-hidden="true"' : '' ?>>
+                    <?php for ($copy = 0; $copy < 4; $copy++): ?>
+                        <div class="ticker-group" <?= $sequence === 0 && $copy === 0 ? '' : 'aria-hidden="true"' ?>>
+                            <span class="ticker-label">Now recruiting volunteers</span>
+                            <?php foreach ($tickerItems as $item): ?>
+                                <span class="ticker-item">
+                                    <span class="ticker-title"><?= esc($item['title']) ?></span>
+                                    <?php if ($item['meta'] !== ''): ?>
+                                        <span class="ticker-meta"><?= esc($item['meta']) ?></span>
+                                    <?php endif; ?>
+                                    <i class="fa fa-arrow-right" aria-hidden="true"></i>
+                                </span>
+                            <?php endforeach; ?>
+                        </div>
+                    <?php endfor; ?>
                 </div>
             <?php endfor; ?>
         </div>