Ich versuche, Medienabfragen zu verwenden, um Stile für Desktop-Geräte zu überschreiben, aber es scheint nicht zu funktionieren. Ich habe die Rahmenfarbe auf das h2-Element festgelegt und einen Test durchgeführt, um das Problem besser zu veranschaulichen. Wie Sie sehen können, ist die Rahmenfarbe von h2 auf Gelb eingestellt.

Das ist mein SASS-Stil:

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

}

Hier ist die Medienabfrage unten auf derselben Seite. Wie Sie sehen können, ist die Randfarbe auf Rot eingestellt, es wird jedoch immer noch die gelbe Randfarbe angezeigt, obwohl es sich um eine rote Randfarbe handeln sollte. Es erscheint nur rot, wenn ich die gelbe Randfarbe im Universalstil entferne.

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