/* 创建新的响应式辅助类CSS文件 */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }
.gap-5 { gap: 3rem; }

/* 响应式间距 */
@media (max-width: 576px) {
    .mb-sm-0 { margin-bottom: 0 !important; }
    .mb-sm-1 { margin-bottom: 0.25rem !important; }
    .mb-sm-2 { margin-bottom: 0.5rem !important; }
    .mb-sm-3 { margin-bottom: 1rem !important; }
    .mb-sm-4 { margin-bottom: 1.5rem !important; }
    .mb-sm-5 { margin-bottom: 3rem !important; }
    
    .mt-sm-0 { margin-top: 0 !important; }
    .mt-sm-1 { margin-top: 0.25rem !important; }
    .mt-sm-2 { margin-top: 0.5rem !important; }
    .mt-sm-3 { margin-top: 1rem !important; }
    .mt-sm-4 { margin-top: 1.5rem !important; }
    .mt-sm-5 { margin-top: 3rem !important; }
}

/* 响应式文本对齐 */
@media (max-width: 576px) {
    .text-sm-center { text-align: center !important; }
    .text-sm-left { text-align: left !important; }
    .text-sm-right { text-align: right !important; }
}

/* 响应式显示/隐藏 */
@media (max-width: 576px) {
    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
    .d-sm-flex { display: flex !important; }
} 