.gallery {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-width: 33%;
  -moz-column-width: 33%;
  column-width: 33%;
}

.gallery .pics {
  -webkit-transition: all 350ms ease;
  transition: all 350ms ease;
}

.gallery .animation {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

@media (max-width: 450px) {
  .gallery {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    -webkit-column-width: 100%;
    -moz-column-width: 100%;
    column-width: 100%;
  }
}

.gallery-item .portfolio-info {
  opacity: 0;
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: -10px;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  background: rgba(0, 0, 0, 0.3);
  padding: 15px;
}

.gallery-item .portfolio-info h4 {
  font-size: 18px;
  font-weight: 400;
  color: #dddddd;
  margin: 0;
  font-family: "Heebo", sans-serif;
}

.gallery-item:hover .portfolio-info {
  opacity: 1;
  bottom: 0px;
}