重构自保障设计：建筑能源系统（文+2图+文+2图）和排水系统（文+2图），带图名标注

css/style.css

@@ -1281,6 +1281,68 @@ body {
     }
 }
 
+/* ========================================
+   自保障设计 - 图片对排布局（带图名）
+   ======================================== */
+.image-pair-with-caption {
+    display: flex;
+    gap: var(--spacing-lg);
+    margin: var(--spacing-lg) 0;
+}
+
+.image-item {
+    flex: 1;
+    text-align: center;
+}
+
+.image-item img {
+    width: 100%;
+    height: auto;
+    max-height: 500px;
+    object-fit: contain;
+    background: #FFFFFF;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-soft);
+    display: block;
+    margin-bottom: var(--spacing-sm);
+}
+
+.placeholder-text.medium {
+    min-height: 400px;
+    font-size: 1.2rem;
+    margin-bottom: var(--spacing-sm);
+}
+
+.image-caption {
+    font-size: 1rem;
+    color: var(--text-primary);
+    font-weight: 600;
+    margin-top: var(--spacing-xs);
+    padding: var(--spacing-xs) 0;
+    border-top: 2px solid var(--primary-muted);
+}
+
+/* 响应式调整 */
+@media (max-width: 1024px) {
+    .image-pair-with-caption {
+        flex-direction: column;
+    }
+    
+    .image-item img {
+        max-height: 400px;
+    }
+}
+
+@media (max-width: 768px) {
+    .image-item img {
+        max-height: 300px;
+    }
+    
+    .placeholder-text.medium {
+        min-height: 250px;
+    }
+}
+
 /* ========================================
    响应式调整
    ======================================== */