Saya cuba menggunakan pertanyaan media untuk mengatasi gaya untuk peranti desktop tetapi ia nampaknya tidak berfungsi. Saya menetapkan warna sempadan kepada elemen h2 dan melakukan ujian untuk menggambarkan masalah dengan lebih baik. Seperti yang anda lihat, warna sempadan h2 ditetapkan kepada kuning.

Ini adalah gaya SASS saya:

.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      
                }
            } 
        }
   }

}

Berikut ialah pertanyaan media di bahagian bawah halaman yang sama. Seperti yang anda lihat, warna jidar ditetapkan kepada merah tetapi ia masih menunjukkan warna jidar kuning apabila ia sepatutnya warna sempadan merah. Ia hanya kelihatan merah jika saya mengalih keluar warna sempadan kuning dalam gaya universal.

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