<div class="cards">
  <div class="card">
    <div class="card__text">
      <h3 class="card__title">Товар</h3>       <div class="card__description">
        Задача организации, в особенности же рамки и место обучения кадров требуют определения и уточнения дальнейших направлений развития. 
      </div>
      <div class="card__secondary">
        от
        <span class="card__price">60 000 ₽/мес.</span>
      </div>
      <div class="card__bottom">
        <button type="button" class="card__button">Оставить заявку</button>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card__text">
      <h3 class="card__title">Товар</h3>       <div class="card__description">
        Задача организации, в особенности же рамки и место обучения кадров требуют определения и уточнения дальнейших направлений развития. 
      </div>
      <div class="card__secondary">
        от
        <span class="card__price">60 000 ₽/мес.</span>
      </div>
      <div class="card__bottom">
        <button type="button" class="card__button">Оставить заявку</button>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card__text">
      <h3 class="card__title">Товар</h3>       <div class="card__description">
        Задача организации, в особенности же рамки и место обучения кадров требуют определения и уточнения дальнейших направлений развития. 
      </div>
      <div class="card__secondary">
        от
        <span class="card__price">60 000 ₽/мес.</span>
      </div>
      <div class="card__bottom">
        <button type="button" class="card__button">Оставить заявку</button>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card__text">
      <h3 class="card__title">Товар</h3>       <div class="card__description">
        Задача организации, в особенности же рамки и место обучения кадров требуют определения и уточнения дальнейших направлений развития. 
      </div>
      <div class="card__secondary">
        от
        <span class="card__price">60 000 ₽/мес.</span>
      </div>
      <div class="card__bottom">
        <button type="button" class="card__button">Оставить заявку</button>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card__text">
      <h3 class="card__title">Товар</h3>       <div class="card__description">
        Задача организации, в особенности же рамки и место обучения кадров требуют определения и уточнения дальнейших направлений развития. 
      </div>
      <div class="card__secondary">
        от
        <span class="card__price">60 000 ₽/мес.</span>
      </div>
      <div class="card__bottom">
        <button type="button" class="card__button">Оставить заявку</button>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card__text">
      <h3 class="card__title">Товар</h3>       <div class="card__description">
        Задача организации, в особенности же рамки и место обучения кадров требуют определения и уточнения дальнейших направлений развития. 
      </div>
      <div class="card__secondary">
        от
        <span class="card__price">60 000 ₽/мес.</span>
      </div>
      <div class="card__bottom">
        <button type="button" class="card__button">Оставить заявку</button>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card__text">
      <h3 class="card__title">Товар</h3>       <div class="card__description">
        Задача организации, в особенности же рамки и место обучения кадров требуют определения и уточнения дальнейших направлений развития. 
      </div>
      <div class="card__secondary">
        от
        <span class="card__price">60 000 ₽/мес.</span>
      </div>
      <div class="card__bottom">
        <button type="button" class="card__button">Оставить заявку</button>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card__text">
      <h3 class="card__title">Товар</h3>       <div class="card__description">
        Задача организации, в особенности же рамки и место обучения кадров требуют определения и уточнения дальнейших направлений развития. 
      </div>
      <div class="card__secondary">
        от
        <span class="card__price">60 000 ₽/мес.</span>
      </div>
      <div class="card__bottom">
        <button type="button" class="card__button">Оставить заявку</button>
      </div>
    </div>
  </div>
</div>

html,
body {
  margin: 0;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eee;
  width: 100%;
  max-width: 100%;
  padding: 1rem;
  margin-bottom: -1px;
  margin-left: -1px;
  z-index: 0;
  transform: scale(1);
  overflow: hidden;
  transition: transform 300ms ease;
}

.card:hover {
  overflow: visible;
  transform: scale(1.025);
  z-index: 1;
}

.card:hover .card__bottom {
  display: block;
}

.card__title {
  margin: 0 0 1rem 0;
}

.card__price {
  font-weight: bold;
}

.card__description {
  color: #999;
  margin: 1rem 0;
}

.card__bottom {
  display: none;
  position: relative;
  z-index: -1;
  background: #fff;
  padding-top: 1rem;
}

.card__button {
  cursor: pointer;
  display: block;
  width: 100%;
  appearance: none;
  background-color: #222;
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  font-weight: 500;
}

@media (min-width: 420px) {
  .card {
    max-width: 50%;
  }

  .card__bottom {
    position: absolute;
    top: calc(100% - 1px);
    left: -1px;
    right: -1px;
    border: 1px solid #eee;
    border-top: none;
    padding: 0.5rem 1rem 1rem 1rem;
  }
}

@media (min-width: 640px) {
  .card {
    max-width: 33%;
  }
}

@media (min-width: 1024px) {
  .card {
    max-width: 25%;
  }
}