媒体查询无法覆盖SASS样式问题求助

我尝试用媒体查询覆盖桌面端的样式，但始终不生效。为了直观测试，我给h2元素设置了黄色边框，目前不管设备宽度是否≥768px，h2都显示黄色边框——只有删除通用样式里的黄色边框，媒体查询里的红色边框才会显示。

通用SASS样式： #

.hero{
    width: 100%;
    position: relative;
    background-color: $orange-color;
    background-image: url("../../../src/assets/images/gastro/gasto-item-chicken-buger.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 0;
    .hero_content{ 
        flex-grow: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        transform: translateY(-100px);
        z-index: 2;
        .container{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            .box{
                padding: 36px;
                display: flex;
                flex-wrap: wrap;
                text-align: center;
                justify-content: center;
                width: 50%;
                h2{
                    border: 2px solid yellow;
                    color: $c-white;
                    font-family: "CustomFont";
                    font-size: 4rem;
                    line-height: 1.1;
                    padding-bottom: 18px;
                    text-shadow: .0625rem .0625rem #000;
                    span{
                        color: $button-color;
                    }
                }
                h3{ 
                    color: $c-white;
                    font-family: $ff-title;
                    text-shadow: .0625rem .0625rem #000;
                    font-size: 2rem      
                }
            } 
        }
   }
}

不生效的媒体查询： #

@media (min-width: 768px){    
    .hero{    
        .hero_content{
            .box{
                h2{
                    border: 2px solid red;
                    font-size: 4rem;
                }
                h3{
                    font-size: 2rem;
                }
            }
        } 
    }
}

问题原因与解决办法 #

问题核心是CSS选择器优先级不一致：通用样式中h2的选择器层级是.hero .hero_content .container .box h2，而媒体查询里的选择器少了.container这一层，导致通用样式的优先级更高，媒体查询的样式被覆盖。

方案1：补全选择器层级（推荐）

把媒体查询里的选择器补全，和通用样式的层级保持一致：

@media (min-width: 768px){    
    .hero{    
        .hero_content{
            .container{ // 补上.container层级
                .box{
                    h2{
                        border: 2px solid red;
                        font-size: 4rem;
                    }
                    h3{
                        font-size: 2rem;
                    }
                }
            }
        } 
    }
}

方案2：使用!important（不推荐）

如果临时需要快速生效，可以给媒体查询里的样式加!important，但这种写法会增加后续样式维护的复杂度，不建议长期使用：

@media (min-width: 768px){    
    .hero .hero_content .box h2{
        border: 2px solid red !important;
        font-size: 4rem;
    }
}

内容的提问来源于stack exchange，提问作者Luis Alejandro López de Anda