.features-wrapper {
                flex-direction: column;
                gap: 1.5rem; /* 增加垂直间距 */
            }
            .feature-card {
                width: 100% !important; /* 确保在小屏上占满宽度 */
            }
            
            /* 代码比较部分改为垂直堆叠 */
            .code-comparison-row {
                flex-direction: column;
                gap: 16px;
            }
            .code-box {
                width: 100% !important; /* 确保占满宽度 */
                height: 300px !important; /* 小屏幕上高度可以更小 */
            }
            
            /* 标签行在垂直堆叠时也需要调整 */
            .comparison-label-row {
                flex-direction: column;
                align-items: flex-start;
                margin-bottom: 8px;
            }
            .comparison-label-row vaadin-label:last-child {
                margin-top: 10px; /* 两个标签之间增加垂直距离 */
            }
            
            /* 底部链接在小屏幕上垂直堆叠 */
            .footer-links-row {
                flex-direction: column;
                gap: 8px;
            }
            
            /* 媒体查询：大屏幕 (例如 768px 或以上) */
            @media (min-width: 768px) {
                /* 恢复为水平布局 */
                .features-wrapper {
                    flex-direction: row;
                    gap: var(--lumo-space-m);
                }
                .code-comparison-row {
                    flex-direction: row;
                    gap: var(--lumo-space-m);
                }
                .code-box {
                    width: 50% !important; /* 大屏幕上恢复并排和固定宽度 */
                    height: 680px !important; /* 恢复默认高度 */
                }
                
                /* 恢复标签行并排对齐 */
                .comparison-label-row {
                    flex-direction: row;
                    align-items: center;
                    margin-bottom: 0;
                }
                
                .footer-links-row {
                    flex-direction: row;
                    gap: 16px;
                }
            }