How to cancel media.sass rules and write new ones?

Question

Sass

Good day everyone!
Friends, I ask for advice, how to cancel the rules of media.sass and prescribe new ones?
More:
With standard monitors, the blocks look 4 in a row, the text is on a white background, when hovering, a picture appears, the button and the text turns white.
What I want to do now but it doesn't work:
In the mobile view, I think that the hover effect is not needed and it needs to be done so that the buttons and pictures are displayed in blocks by default.
here is the sass code:

.items 
  max-width: 1000px
  margin: 0px auto 0

.item 
  float: left
  background-color: #fff
  width: 97%
  height: em(400px)
  box-shadow: 0 0 19px rgba(10, 10, 10, 1)
  position: relative
  padding: 70px 10px 10px
  margin: 1%
  text-align: center
  box-sizing: border-box
  outline: 2px solid #32d3ff
  outline-offset: -7px
  h3
  	color: #000
  	text-align: center
  	font-size: 20px
  	



  
  .sbottons
  	display: none
  	background-color: #F39F18
  	border: 0
  	padding: 5px
  	font-size: em(18px)
  	font-family: sans-serif
  	bottom: em(60px)
  	position: absolute
  	width: 80%
  	margin-bottom: em(15px)
  	margin: 0 -41%

  	
  	a
  		color: #000
  		text-decoration: none
  	box-shadow: 0 3px 0 #B97200
  	border-radius: 10px
  	// margin: em(0px) em(-103px)
  	transition: all .5s ease

    

  &:after 
    content: ''
    position: absolute
    top: 20px
    left: 0
    right: 0
    margin: auto
    width: 46px
    height: 46px
    background: url(../img/ico-lp-offer-46px.png) no-repeat
  
  &_1 
    &:after 
      background-position: 0 0
    
    &:hover 
      background: url(../img/team/rain.jpg) no-repeat
      background-size: 100%

      &:after  
      	background-position: right 0 
    
  
  &_2 
    &:after 
      background-position: 0 -46px
    
    &:hover 
      background: url(../img/team/rain.jpg) no-repeat
      background-size: 100%
      &:after  
      	background-position: right -46px 
    
  
  &_3 
    &:after 
      background-position: 0 -92px
    
    &:hover 
      background: url(http://www.sgs66.ru/img/raboti/montaj-rab.jpg) no-repeat
      background-size: 100%
      &:after  
      	background-position: right -92px
    
  
  &_4 
    &:after 
      background-position: 0 -138px
    
    &:hover 
      background: url(http://www.sgs66.ru/img/raboti/montaj-rab.jpg) no-repeat
      background-size: 100%
      &:after  
      	background-position: right -138px
    
  
  &:hover
    color: #fff
    h3
    	color: #fff


        .sbottons
          display: inline-block
          & a:hover, &:focus
            color: #fff
            text-decoration: none

          &:hover
            background-color: #F3B046

          &:active
            background-color: #986107
            transform: translateY(4px)

        &:before
            // outline-color: #fff
            background-color: #394b5f
            opacity: 0.85px

Here is the html code snippet:

<div  class="conteiner" id="lp-offer">
            <div class="row">
              <div class="col-md-3 col-lg-3">
                <div>
                  <div class="items">
                    <div class="item item_1">
                      <h3>блок_1</h3>
                      <p>Обсалютно всякий текст</p>
                      
                      <div class="sbottons">

                        <a href="#callback" class="sbuttons">Как выровнять</a>

                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-3 col-lg-3">
                <div class="items">
                  <div class="item item_2">
                    <h3>Блок_2</h3>
                    <p>Всякий текст"</p>
                    <div class="sbottons">
                      <a href="#callback" class="sbuttons">Заказать консультацию</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-3 col-lg-3">
                <div class="items">
                  <div class="item item_3">
                    <h3>Блок_4</h3>
                    <p>Текст всякий</p>
                    <div class="sbottons">
                      <a href="#callback" class="sbuttons">Кнопка</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-3 col-lg-3">
                <div class="items">
                  <div class="item item_4">
                    <h3>Блок_4</h3>
                    <p>Текст всякий</p>
                    <div class="sbottons">
                      <a href="#callback" class="sbuttons">Заказать материалы</a>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>