Docs: Try to improve main page - 3

Author: BornToBeRoot

Website/src/pages/index.js

@@ -132,34 +132,14 @@ export default function Home() {
         <HomepageFeatures />
         <div className="container text--center margin-top--xl margin-bottom--xl">
           <Heading as="h2">See It in Action</Heading>
-          <div className={styles.previewGrid}>
-            <div className={styles.previewItem}>
-              <img
-                src="./img/preview-profiles.gif"
-                alt="Profile management preview"
-              />
-              <p className={styles.previewCaption}>
-                Encrypted profile files, group &amp; profile management.
-              </p>
-            </div>
-            <div className={styles.previewItem}>
-              <img
-                src="./img/preview-tabs-drag-drop.gif"
-                alt="Tabs and drag & drop preview"
-              />
-              <p className={styles.previewCaption}>
-                Tabs and drag &amp; drop functionality.
-              </p>
-            </div>
-            <div className={styles.previewItem}>
-              <img
-                src="./img/preview-light-theme.png"
-                alt="Light theme preview"
-              />
-              <p className={styles.previewCaption}>
-                Customizable light/dark themes and accent colors.
-              </p>
-            </div>
+          <div className={styles.previewSingle}>
+            <img
+              src="./img/preview-tabs-drag-drop.gif"
+              alt="Tabs and drag & drop preview"
+            />
+            <p className={styles.previewCaption}>
+              Tabs and drag &amp; drop functionality.
+            </p>
           </div>
           <Link
             className="button button--outline button--primary"

Website/src/pages/styles.module.css

@@ -141,17 +141,14 @@ table {
   text-decoration: none;
 }
 
-/* ─── Preview grid ("See It in Action") ────────────── */
+/* ─── Preview ("See It in Action") ─────────────────── */
 
-.previewGrid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 24px;
-  margin: 32px 0 40px;
-  text-align: left;
+.previewSingle {
+  margin: 32px auto 40px;
+  max-width: var(--content-max-width);
 }
 
-.previewItem img {
+.previewSingle img {
   display: block;
   width: 100%;
   height: auto;
@@ -165,12 +162,6 @@ table {
   color: var(--ifm-color-emphasis-600);
 }
 
-@media only screen and (max-width: 768px) {
-  .previewGrid {
-    grid-template-columns: 1fr;
-  }
-}
-
 /* ─── Responsive ────────────────────────────────────── */
 
 @media only screen and (max-width: 768px) {