From 1c714dd3d677e97852793f0563aa727f99980f5f Mon Sep 17 00:00:00 2001
From: Neucrack <CZD666666@gmail.com>
Date: Tue, 9 Sep 2025 17:05:56 +0800
Subject: [PATCH] optimize maixcam2 doc

---
 docs/hardware/en/maixcam/README.md | 19 +++++++++++++++++++
 docs/hardware/zh/maixcam/README.md | 18 ++++++++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/docs/hardware/en/maixcam/README.md b/docs/hardware/en/maixcam/README.md
index f88e96f2..f845cf3f 100644
--- a/docs/hardware/en/maixcam/README.md
+++ b/docs/hardware/en/maixcam/README.md
@@ -26,9 +26,13 @@ title: MaixCAM — Fast Deployment for AI Vision and Audio Projects
         transition: transform 0.4s ease;
     }
     #content_body .item2 {
+        width: 90%;
+        align-self: start;
         background: linear-gradient(-45deg, #c471ed,  #f64f59);
     }
     #content_body .item3 {
+        width: 90%;
+        align-self: end;
         background: linear-gradient(-45deg, #12c2e9, #c471ed);
     }
     #content_body .card_item:visited {
@@ -114,6 +118,21 @@ title: MaixCAM — Fast Deployment for AI Vision and Audio Projects
     .dark .card_item {
         background: #292929;
     }
+    @media screen and (max-width: 768px) {
+        #content_body .item1 {
+            flex-direction: column-reverse;
+        }
+        #content_body .item1 img {
+            padding-bottom: 1em;
+        }
+        #content_body .item2 {
+            width: 98%;
+        }
+        #content_body .item3 {
+            width: 98%;
+        }
+    }
+</style>
 </style>
 
 <div style="width:100%;" class="flex_center">
diff --git a/docs/hardware/zh/maixcam/README.md b/docs/hardware/zh/maixcam/README.md
index b0e9bf32..1b15b538 100644
--- a/docs/hardware/zh/maixcam/README.md
+++ b/docs/hardware/zh/maixcam/README.md
@@ -26,9 +26,13 @@ title: MaixCAM -- 快速落地 AI 视觉、听觉项目
         transition: transform 0.4s ease;
     }
     #content_body .item2 {
+        width: 90%;
+        align-self: start;
         background: linear-gradient(-45deg, #c471ed,  #f64f59);
     }
     #content_body .item3 {
+        width: 90%;
+        align-self: end;
         background: linear-gradient(-45deg, #12c2e9, #c471ed);
     }
     #content_body .card_item:visited {
@@ -114,6 +118,20 @@ title: MaixCAM -- 快速落地 AI 视觉、听觉项目
     .dark .card_item {
         background: #292929;
     }
+    @media screen and (max-width: 768px) {
+        #content_body .item1 {
+            flex-direction: column-reverse;
+        }
+        #content_body .item1 img {
+            padding-bottom: 1em;
+        }
+        #content_body .item2 {
+            width: 98%;
+        }
+        #content_body .item3 {
+            width: 98%;
+        }
+    }
 </style>
 
 <div style="width:100%;" class="flex_center">