Media queries do not override SASS styles

Question

I am trying to override styles with media queries for a desktop device, but it does not seem to work. I set a border color to an h2 element and tested it to better visualize this issue. As you can see the border color of the h2 is set to yellow.

These are my SASS styles:

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

}

And these are my media queries at the bottom of the same page. As you can see the border is set to the color red, but it is still showing the color yellow when it should be a red border color. It only shows the color red if I remove the yellow border color in my general styles.

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

The attempted override in the media query is

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

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

In my personal experience, one of the real negative things about stuff like SCSS or LESS is that they lead you into traps like that. CSS is a very difficult tool to "tame" and get under control.

There are hacks to get around this, for example

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

for the media-conditional rule. That should definitely make you feel dirty. Complex selectors are a trap because once you start you're doomed forever.