!important not working in sass, what should I do?

Question

css

I've been suffering for 30 minutes now, if not more. How does !important work in media queries?
Add. there is a div with icons inside it

<div class="social">
<a href="#"><i class="icon vk"></i></a>
<a href="#"><i class="icon instagram"></i></a>
<a href="#"><i class="icon facebook"></i></a>
</div>

At 1200px all icons should be shown, at 991 - facebook is removed, at 480 - all are shown
For the life of me, I can't implement it.

@media only screen and (max-width : 991px)
.social_wrapper
  text-align: center
  a
    padding: 0 !important
    margin: 0
    z-index: 5
    i.facebook
      display: none !important
@media only screen and (min-width : 480px)
.social_wrapper
  text-align: center
  a
    padding: 0 !important
    margin: 0
    z-index: 5
    i.facebook
      display: block !important

Answer 1

(min-width : 480px)
Fix it to max-width.
You have this block of classes interrupting everything that goes above

Answer 2

First stop using important - it's bad practice. If you can't do without them, then something is wrong.
Secondly, it is not necessary to write the same styles in media queries. There you write only the differences.
Thirdly, it's better to stick with either only max-width or min-width. You don't have to mix it all up. It will be easier for you later.
Your code should be written like this:

.social_wrapper
  text-align: center

  a
    padding: 0
    margin: 0
    z-index: 5

@media only screen and (min-width : 480px)
.social_wrapper

  i.facebook
    display: none

@media only screen and (min-width : 991px)
.social_wrapper

  i.facebook
    display: block