/* 原有響應式寬度框架 (ibf01) */
@media (min-width: 576px)  { .ibf01 { max-width: 510px; } }
@media (min-width: 768px)  { .ibf01 { max-width: 690px; } }
@media (min-width: 992px)  { .ibf01 { max-width: 922px; } }
@media (min-width: 1200px) { .ibf01 { max-width: 1102px; } }
@media (min-width: 1400px) { .ibf01 { max-width: 1282px; } }

/* 專屬針對該區塊的標題樣式 */
.suit .col-12 h3 {
    line-height: 1.5;           /* 主標題行距，1.5 讓 Emoji 與文字不擁擠 */
    letter-spacing: 0.02em;     /* 微調字距 */
}

/* 針對副標題 (small) 的優化 */
.suit .col-12 h3 small {
    line-height: 1.5 !important; /* 副標題字小，行距要更寬才好閱讀 */
    margin-top: 6px;            /* 與上方主標題拉開距離 */
    color: #555;                 /* 顏色稍微轉深灰，提升層次感 */
    
    /* 讓長句子在寬螢幕上自動適度換行，避免變成一長條 */
    max-width: 85%;              
    margin-left: auto;
    margin-right: auto;
}

/* RWD 響應式調整 */
@media (max-width: 768px) {
    .suit .col-12 h3 {
        font-size: 1.4rem;       /* 手機版標題稍微縮小以免佔滿螢幕 */
        line-height: 1.4;
    }

    .suit .col-12 h3 small {
        font-size: 0.95rem;      /* 手機版副標題字體調整 */
        line-height: 1.6 !important;
        max-width: 100%;         /* 手機版空間有限，允許撐滿寬度 */
        padding: 0 10px;         /* 兩側留點邊距 */
    }
}