.responsive {
  padding: 10px 15px;
  float: left;
  width: 16%;
}


div.gallery {
  border: 1px solid #ccc;
   box-shadow: 1px 1px 5px #ccc;
}

div.gallery:hover {
  border: 1px solid gray;
  box-shadow: 1px 1px 5px gray;
}


div.gallery img {
  width: 100%;
  height: auto;
  padding: 8px 8px 0px 8px;
}

div.desc {
  text-align: center;
  width: 100%;
  padding-bottom: 4px;
}


@media only screen and (max-width: 1100px) {
  .responsive {
    width: 20%;
  }
}



@media only screen and (max-width: 890px) {
  .responsive {
    width: 25%;
  }
}



@media only screen and (max-width: 650px) {
  .responsive {
    width: 50%;
  }
}






  .clearfix:after {
  content: "";
  display: table;
  clear: both;
}