[Помогите] Не срабатывает код SASS

Друзья, ни как не могу понять, почему у меня не работает код...
Точнее не работает эффект hover.
Теперь подробнее:
Пытаюсь сделать блоки как на этом сайте реализовано в разделе (основные услуги компании): http://www.sgs66.ru/ ... Вот что я делал:
Стрктура html:

HTML:

<div  class="conteiner" id="lp-offer">
                <div class="row">
                    <div class="col-lg-3">
                        <div>
                            <div>
                                <p><i class="lp-icon lp-icon1"></i></p>
                                <p>Заголовок</p>
                                <p>Подзаголовок. Текст разный.</p>
                                <button class="btn btn-default" data-toggle="modal" data-target="#lp-order-form">
                                    Заказать
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div>
                            <div>
                                <p><i class="lp-icon lp-icon2"></i></p>
                                <p>Заголовок</p>
                                <p>Подзаголовок. Текст разный.</p>
                                <button class="btn btn-default" data-toggle="modal" data-target="#lp-order-form">
                                    Заказать
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div>
                            <div>
                                <p><i class="lp-icon lp-icon3"></i></p>
                                <p>Заголовок</p>
                                <p>Подзаголовок. Текст разный.</p>
                                <button class="btn btn-default" data-toggle="modal" data-target="#lp-order-form">
                                    Заказать
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div>
                            <div>
                                <p><i class="lp-icon lp-icon4"></i></p>
                                <p>Заголовок</p>
                                <p>Подзаголовок. Текст разный.</p>
                                <button class="btn btn-default" data-toggle="modal" data-target="#lp-order-form">
                                    Заказать
                                </button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

Код SASS:

HTML:

#lp-offer
    .col-lg-3
        height: 422px
        // float:
        // min-height: 1px
        // padding-left: 15px
        // padding-right: 15px
        // position: relative

        div
            background-color: #fff
            box-shadow: 0 0 10px rgba(100,100,100,0.3)
            height: 96.4%
            margin: 6px
            padding: 7px
          
            div
                height: 100%
                border: 2px solid #32d3ff
                p:nth-child(2)
                    padding-top: 20px
                    font-size: 21px
                p:nth-child(3)
                    padding-top: 15px
                p
                    margin: 0 0 10px

#lp-offer
  padding-bottom: 105px
  margin-top: -145px
  button
    display: none
    width: 60%
    height: 44px
    color: #fff
    font-size: 17px
    position: absolute
    left: 20%
    bottom: 67px
  .col-lg-3
    height: 350px
    > div:hover button
      display: inline-block
  > div > div > div:nth-child(2) > .col-lg-3
    height: 422px
  .lp-icon
    width: 46px
    height: 46px
    margin-top: 43px
  .lp-icon1
    background: url(../img/ico-lp-offer-46px.png)
    background-position: 0 0
  .lp-icon2
    background: url(../img/ico-lp-offer-46px.png)
    background-position: 0 -46px
  .lp-icon3
    background: url(../img/ico-lp-offer-46px.png)
    background-position: 0 -92px
  .lp-icon4
    background: url(../img/ico-lp-offer-46px.png)
    background-position: 0 -138px
  .col-lg-3
    > div
      height: 96.4%
      margin: 6px
      padding: 7px
      background-color: #fff
      box-shadow: 0 0 10px rgba(100, 100, 100, 0.3)
      > div
        height: 100%
        border: 2px solid #32d3ff
        > p
          &:nth-child(2)
            font-size: 21px
            padding-top: 27px
          &:nth-child(3)
            padding-top: 15px
    > div:hover
      > div
        border: 2px solid #fff
        color: #fff
      .lp-icon
        -webkit-filter: invert(100%)
        filter: invert(100%)
  > div > div > div:nth-child(2) > div
    &:nth-child(1) > div:hover
      background: url(../img/team/3.jpg)
      background-size: 100%
    &:nth-child(2) > div:hover
      background: url(../img/team/1.jpg)
      background-size: 100%
    &:nth-child(3) > div:hover
      background: url(../img/team/2.jpg)
      background-size: 100%
    &:nth-child(4) > div:hover
      background: url(../img/team/3.jpg)
      background-size: 100%





//ALWAYS END
@import "_media.sass"

На мой (далеко не опытный взгляд), вроде бы всё должно работать, но увы... По факту, при наведении на блок, не выводятся картинки, которые должны появляться при наведении на блок, как это происходит по ссылке вышеуказаной... Расскажите что не так с кодом у меня, и дайте совет, как исправить текущее положение дел на желаемое...
Спасибо.