Made page a little mobile-friendlier

src/components/About.tsx

@@ -28,20 +28,10 @@ function About() {
 
         <div style={{ marginTop: '8rem' }}>
           <h2 style={{ marginBottom: '4rem' }}>{t.team.title}</h2>
-          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '4rem' }}>
+          <div className="team-grid">
             {[t.team.member1, t.team.member2, t.team.member3].map((member, i) => (
-              <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-                <div style={{ 
-                  width: '180px', 
-                  height: '180px', 
-                  borderRadius: '50%', 
-                  backgroundColor: 'var(--bg-light)', 
-                  marginBottom: '1.5rem',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  border: '1px solid var(--border-color)'
-                }}>
+              <div key={i} className="team-member">
+                <div className="team-member-avatar" style={{ borderRadius: '50%' }}>
                   <span className="material-icons" style={{ fontSize: '4rem', opacity: 0.2 }}>person</span>
                 </div>
                 <h3 style={{ marginBottom: '0.5rem', fontSize: '1.3rem' }}>{member.name}</h3>

src/components/ProductPage.tsx

@@ -28,7 +28,7 @@ function ProductPage({ title, description, icon, trademark, children }: ProductP
         
         <section className="section">
           <div className="container">
-            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '4rem', alignItems: 'center' }}>
+            <div className="product-details-grid">
               <div>
                 <h2>{t.detailsTitle}</h2>
                 <p>{t.detailsText}</p>

src/style.css

@@ -49,6 +49,11 @@ h2::after {
   background-color: var(--accent-color);
 }
 
+h3 {
+  text-align: center;
+  margin-bottom: 1rem;
+}
+
 p {
   margin-bottom: 1rem;
   color: var(--text-secondary);
@@ -246,18 +251,29 @@ a:hover {
 
 /* About Grid */
 .about-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  display: flex;
+  flex-wrap: wrap;
   gap: 3rem;
   margin-top: 4rem;
+  justify-content: center;
+}
+
+.about-grid > div {
+  flex: 1 1 280px;
+  min-width: 280px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
 }
 
 /* Products Section */
 .products-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  display: flex;
+  flex-wrap: wrap;
   gap: 2.5rem;
   margin-top: 3rem;
+  justify-content: center;
 }
 
 .product-card {
@@ -271,6 +287,8 @@ a:hover {
   flex-direction: column;
   align-items: center;
   text-align: center;
+  flex: 1 1 320px;
+  min-width: 320px;
 }
 
 .product-card:hover {
@@ -353,6 +371,36 @@ a:hover {
   background-color: #004080;
 }
 
+/* Team Section */
+.team-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4rem;
+  justify-content: center;
+  margin-top: 4rem;
+}
+
+.team-member {
+  flex: 1 1 280px;
+  min-width: 280px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.team-member-avatar {
+  width: 180px; 
+  height: 180px; 
+  borderRadius: 50%; 
+  background-color: var(--bg-light); 
+  margin-bottom: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border-color);
+}
+
 .vienna-signet {
   margin-top: 5rem;
   font-size: 0.75rem;
@@ -404,7 +452,28 @@ html {
   }
 }
 
+.product-details-grid {
+  display: grid; 
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
+  gap: 4rem; 
+  align-items: center;
+}
+
 @media (max-width: 768px) {
+  .product-details-grid {
+    text-align: center;
+    justify-content: center;
+  }
+  
+  .product-details-grid h2 {
+    margin-bottom: 2rem;
+  }
+
+  .product-details-grid ul {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
   .container {
     padding: 0 1.5rem;
   }
@@ -462,22 +531,31 @@ html {
 
   .about-grid, .products-grid {
     gap: 2rem;
-    text-align: center;
-  }
-
-  /* Target the third child specifically to center it when stacking */
-  .about-grid > div:nth-child(3), .products-grid > div:nth-child(3) {
-    grid-column: 1 / -1;
     display: flex;
     flex-direction: column;
     align-items: center;
+    width: 100%;
   }
 
   .about-grid > div, .product-card {
     display: flex;
     flex-direction: column;
     align-items: center;
-    max-width: 100%;
+    width: 100%;
+    max-width: 500px;
+    margin: 0 auto;
+  }
+
+  .about-grid p, .product-card p {
+    text-align: center;
+  }
+
+  /* Remove special grid centering since we switched to flex-column for mobile */
+  .about-grid > div:nth-child(3), .products-grid > div:nth-child(3) {
+    grid-column: auto;
+    width: 100%;
+    max-width: 500px;
+    margin: 0 auto;
   }
 
   .product-icon {