#titleImg{
    margin-right: 0.5rem;
}
@media (max-width: 767px) {
    #breadNav{
        grid-area: breadNav;
        font-size: 0.8rem;
        color: grey;
        margin-left: 7%;
    }
    #breadNav li{
        float: left;
    }
    #title{
        display: flex;
        flex-direction: row;
        /* 【核心代码】: 让子元素沿着交叉轴（垂直方向）居中对齐 */
        align-items: center;

    }
    #titleImg{
    /* 移除 width: 4%; */
        /* 限制最大高度，例如 2 rem (大约 32px) */
        max-height: 2rem; 
        /* 宽度设置为 auto，让浏览器根据 max-height 自动计算宽度 */
        width: auto; 
        /* 确保高度自适应 */
        height: auto;
        margin-right: 7px;
    }
    h1{
        font-size: 1rem;
    }
    #get-coupons{
        display: flex;
    }
    main button{
        padding:0.5rem 1.5rem 0.5rem 1.5rem;
        border-radius: 5px;
        color: white;
        margin-right: 1rem;
        font-size: 1rem;
    }
    #title{
        grid-area: title;
        justify-content: flex-start;
    }
    #get-coupons{
        grid-area: get-coupons;    
    }
    #breadNav a:link,#breadNav a:visited,#breadNav a:hover,#breadNav a:active {
        color: grey;
    }
    /* ---------------------------------- */
    /* 1. 基础按钮样式 (Basic Button Style) */
    /* ---------------------------------- */
    #get-coupons a {
        /* 核心属性：将行内元素转为行内块，以便设置宽度和高度/内边距 */
        display: inline-block; 
        
        /* 填充和尺寸 */
        padding: 10px 20px; 
        margin: 10px;
        
        /* 视觉外观 */
        background-color: #007bff; /* 按钮背景色：蓝色 */
        color: white; /* 文字颜色 */
        border-radius: 5px; /* 圆角 */
        border: none; /* 移除可能存在的边框 */
        cursor: pointer; /* 鼠标悬停时显示手型指针 */
        
        /* 文本外观 */
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        text-decoration: none; /* 移除链接下划线 */
        
        /* 动画：让过渡更平滑 */
        transition: background-color 0.3s ease, transform 0.1s ease;
    }

    /* ---------------------------------- */
    /* 2. 交互伪类样式 (Interactive Styles) */
    /* ---------------------------------- */

    /* 鼠标悬停效果 */
    #get-coupons a:hover {
        background-color: #0056b3; /* 悬停时颜色变深 */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加轻微阴影 */
    }

    /* 鼠标按下效果 (模拟点击) */
    #get-coupons a:active {
        background-color: #004085; /* 按下时颜色更深 */
        transform: translateY(1px); /* 按钮略微下沉 */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    /* 链接已访问和未访问状态 (通常保持一致) */
    #get-coupons a:link,
    #get-coupon a:visited {
        color: white;
    }
    #other-discount{
        display: block;
    }
}
@media (min-width: 769px) {
    main{
/* 核心：设置为 Grid 容器 */
    display: grid;
    
    /* * 定义列 (Grid-Template-Columns)：
     * 1. 第一列（标题/图片）：占 1 份空间 (1fr)
     * 2. 第二列（按钮）：内容自适应宽度 (auto)，避免按钮被拉伸得太宽。
     * 3. 第三列（备用）：如果有额外空间，让它也占 1 份空间，或者直接将中间列设为 2fr 或 3fr
     * * 优化后采用两列布局：左侧标题区 2fr，右侧按钮区 1fr，以确保标题有足够的空间
     */
    grid-template-columns: auto 1fr auto;
    
    /* 命名布局区域 */
    grid-template-areas: 
        "breadNav breadNav" /* 第一行：breadNav 跨越所有列 */
        "title title"
        "get-coupons get-coupons";   /* 第二行：title 和 coupons 左右排列 */
        
    /* 元素间距 */
    gap: 20px 3px; /* 行间距 20px，列间距 20px */
    margin-left: 10%;
    margin-top: 2rem;
    }

    main > div {
        margin-right: 1rem;
    }
    #get-coupons{

    }

    #get, #twenty-yuan-Billion-Dollar-Subsidies,#mcdonald-jd{
        
    }

}


@media (max-width: 768px) {
    main {
        display: flex;
        flex-direction: column; /* 🌟 核心：确保垂直堆叠 */
        align-items: flex-start; /* 🌟 核心：所有子元素左对齐 */
        width: 100%;
        padding-top: 1rem;
    }

    /* 统一控制所有板块的左边距和下间距 */
    #breadNav, #title, #get-coupons {
        margin-left: 8%;  /* 左边距统一 */
        width: 84%;       /* 留出右边空间 */
        margin-bottom: 1.5rem; /* 板块间的垂直间距 */
        display: flex;    /* 内部也使用 flex 方便对齐 */
        padding: 0;
    }

    #breadNav {
        font-size: 0.8rem;
        list-style: none; /* 移除可能的圆点 */
    }

    #title {
        flex-direction: row; /* 标题内部：图标和文字横排 */
        align-items: center;
    }

    #get-coupons {
        flex-direction: column; /* 🌟 按钮板块内部：按钮也竖着排 */
        gap: 10px; /* 按钮之间的间距 */
    }

    #get-coupons a {
        margin: 0; /* 清除之前可能干扰的 margin */
        width: 100%; /* 手机端按钮建议撑满 84% 的宽度，更好点击 */
        box-sizing: border-box;
    }
}