chore: enhance responsiveness with flexible grids

Author: vero-code

about.html

@@ -19,7 +19,7 @@
 
         <section>
             <h1>Guiding Human Curiosity</h1>
-            <div style="margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
+            <div style="margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;">
                 <div style="padding: 20px; border-left: 3px solid #7c4dff; background: rgba(255,255,255,0.02);">
                     <strong style="color: #fff; display: block; margin-bottom: 10px;">SDG 4: Quality Education</strong>
                     <p style="font-size: 0.9rem; margin: 0;">Target 4.7: We visualize planetary geology through Earth's geography, fostering environmental awareness.</p>

css/about.css

@@ -166,8 +166,31 @@ celestine-footer {
 
 @media (max-width: 768px) {
     h1 { font-size: 2.5rem; }
-    .founder-card { flex-direction: column; text-align: center; align-items: center; }
-    .founder-image-wrapper { width: 100%; max-width: 300px; }
-    .founder-location { justify-content: center; }
-    .credentials-grid { grid-template-columns: 1fr; text-align: left; }
+
+    .founder-card {
+        flex-direction: column;
+        padding: 20px !important;
+        gap: 30px;
+    }
+
+    .founder-image-wrapper {
+        width: 100%;
+        max-width: 280px;
+        margin: 0 auto;
+    }
+
+    .founder-info {
+        text-align: left;
+        width: 100%;
+    }
+
+    .credentials-grid {
+        grid-template-columns: 1fr;
+        gap: 20px;
+    }
+    
+    .credential-box strong {
+        word-wrap: break-word;
+        hyphens: auto;
+    }
 }

features.html

@@ -26,7 +26,7 @@ <h1>Product Tour: From Space to Earth</h1>
             <div class="problem-section" style="margin-bottom: 80px; padding: 40px; background: rgba(255,255,255,0.03); border-radius: 20px; border: 1px solid rgba(255,255,255,0.1);">
                 <h2 style="margin-top: 0; text-align: center;">The Problem We're Solving</h2>
 
-                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 30px;">
+                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 30px;">
                     <div>
                         <h3 style="color: #ff6b6b; font-size: 1.2rem; display: flex; align-items: center; gap: 10px;">
                             <i class="fas fa-times-circle"></i> Static Education
@@ -96,7 +96,7 @@ <h3 class="step-title">The Earth Analogue Loop</h3>
 
         <section style="margin-bottom: 80px;">
             <h2 style="text-align: center; color: #fff; margin-bottom: 40px;">Target Market</h2>
-            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px;">
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px;">
                 <div style="background: rgba(124, 77, 255, 0.1); border: 1px solid rgba(124, 77, 255, 0.3); padding: 30px; border-radius: 16px;">
                     <h3 style="color: #b388ff; margin-top: 0;"><i class="fas fa-school"></i> Primary: STEM Education</h3>
                     <p style="color: #ddd;">

js/footer.js

@@ -23,7 +23,7 @@ class CelestineFooter extends HTMLElement {
             </div>
 
             <p style="color: #666; font-size: 0.9rem; margin-bottom: 15px;">
-                &copy; 2026 Celestine Project by Veronika Kashtanova. <br>Built for the Future.
+                &copy; 2026 Celestine by Veronika Kashtanova. <br>Built for the Future.
             </p>
 
             <div style="display: flex; justify-content: center; gap: 20px; align-items: center; flex-wrap: wrap;">