Why don't @media queries work?

Question

css

Good day to all, why doesn't media always work ?
I use Gulp as a builder.
the problem is that media works on the block, but the text does not work on the nested (block) in it, I can’t understand why? I tried to set the ID to the text that it does not work, I broke my head, tell me what is the problem? what could be causing all this?

@media (max-width:992px) {
        #swiper_text {
                width: 100%;
                margin: 0;
                h3 {
                    font-size: 20px;
                }
            }
        }

<div id="swiper_text">
                                    <h3>Ремонт двухкомнатной квартиры</h3>
</div>

Answer 1

I would like to look at the compiled css and sass
So your sass looks something like this?

#swiper_text {
  width: 400px;
  h3 {
   font-size: 30px;
  }
}
@media (max-width:992px) {
  #swiper_text {
    width: 100%;
    margin: 0;
    h3 {
      font-size: 20px;
    }
  }
}

Most likely you first have a media query and then the code itself

Answer 2

What does compiled SASS look like?