The block leaves when adaptive, how to fix it?

Question

css

Good day. Initially, the block looks like this. Everything works fine

When switching to tablet resolution, this happens: I

use Less and SmartGrid
At lower resolutions, everything is fine.

<div class="item">
          <div class="cube">
            <a href="#"><img src="/assets/img/first.jpg" alt="">
            <i class="icon-mobile"></i></a>
              <div class="textBox">
              <h3>Адаптивная верстка</h3>
            <p>Ваш сайт будет отлично выглядить с планшетов и мобильных устройств.</p>
          </div>
            </div>
        </div>

.item {
    text-align: center;
    justify-content: space-between;
      .md-block({
    .size(12);
    
    });
  }

  .cube {
    
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
  a {
    display: block;
  }
  

  
  a i {
    position: absolute;
    font-size: 40px;
    color: #15A4FA;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 80px;
    height: 80px;
    margin: auto;
    text-align: center;
    line-height: 80px;
    transform: scale(3);
    transition: 0.5s;
    background: rgba(21,164,250, 0.3);
    box-shadow: 8px rgba(180,180,180, 0.3);
    border-radius: 100%;
    opacity: 0;

  }

  
  a img {
    width: 100%;
    height: 100%;
    transition: 0.5s;
    max-width: 320px;
    overflow: hidden;
  }

  a:hover img{
    transform: scale(1.2);

    
  }
  

}
  .cube:hover a i {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
  }
  .cube .textBox {
    position: absolute;
    bottom: 5%;
    color: #fff;
    background: rgba(0,0,0, 0.3);
    max-width: 100%;
    text-transform: uppercase;
    transition: 0.5s;
    font-family: 'Roboto Slab', serif;


  }
    
    .cube:hover .textBox {
      transform: translateY(150%);
    }
    h3 {
      border-top: 1px solid;
      border-bottom: 1px solid;
      font-size: 20px;
      font-weight: bold;
      margin: 6px 0;
    }

    p {
      text-transform: none;
      font-size: 13px;
      letter-spacing: 2px;
      margin-bottom: 3px;
      color: #fff;
      box-shadow: 2px black;
    }