SASS styles take precedence over media queries

Question

I'm trying to use media queries to override styles for desktop devices but it doesn't seem to work. I set the border color to the h2 element and did a test to better visualize the problem. As you can see, the border color of h2 is set to yellow.

This is my SASS style:

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

}

This is the media query at the bottom of the same page. As you can see, the border color is set to red but it still shows yellow border color when it should be red border color. It only appears red if I remove the yellow border color in the universal style.

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

Answer 1

The problem is that your main CSS has a more specific selector, effectively

.hero .hero_content .container .box h2 { ... }

What is being attempted to be overridden in the media query is

.hero .hero_content .box h2 { ... }

So the first one wins: there are four class selectors in the first one, but only three in the second one.

From my personal experience, one real negative side of something like SCSS or LESS is that they can lead you into traps like this. CSS is a very difficult tool to "tame" and control.

There are some tricks to get around this problem, such as

.hero.hero.hero .hero_content .box h2 { ... }

is used for media condition rules. This will definitely make you feel uncomfortable. Complex selectors are a trap because once you start, you're doomed to be stuck in them forever.