/* ============================================================
   index.css —— 首页专用样式
   只在本页面引入(其他页面不需要)

   依赖:必须在 base.css 之后引入,
        因为这里用到了 base.css 里定义的 --main_color
   ============================================================ */


/* ============================================================
   1. 卡片修饰类 —— 在 base.css 的 .card 基础上,只写差异部分
   ============================================================ */

/* 大标题卡 */
.card-mainwords {
    display: flex;
    flex-direction: column;              /* 标题和副标题竖着排 */
    align-items: center;                 /* 交叉轴(水平)居中 */
    justify-content: center;
    gap: 0.5rem;                         /* 标题与副标题之间的间距 */
    font-size: 2.5rem;
    font-weight: 600;
}

/* 说明文字卡 */
.card-body {
    font-size: 1.1rem;
    line-height: 1;                      /* 注意:这个值偏紧,中文正文常用 1.6~1.8 */
}


/* ============================================================
   2. 响应式:屏幕宽度 ≤ 768px
   ============================================================ */
@media (max-width: 768px) {

    /* 所有卡片改为满宽 + 左右留边(去掉桌面的 800px 限制) */
    .card {
        max-width: none;
        margin: 1rem;
        padding: 1rem 1.2rem;
    }

    /* 标题卡:字号缩小 */
    .card-mainwords {
        font-size: 1.8rem;
    }

    /* 正文卡:字号缩小、行距放宽 */
    .card-body {
        font-size: 0.95rem;
        line-height: 1.7;
    }
}