/* *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family:sans-serif
} */
.row {
  position: relative;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.row .column {
  flex: 33.3%;
  width: auto;
  overflow: hidden;
  padding: 0 4px;
  height: 100%;
}
.row .column img {
  margin-top: 2%;
  width: 100%;
  height: 100%;
  cursor: pointer;
  filter: grayscale(1) brightness(0.5);
  border-radius: 5px;
  transition: 0.3s linear;
}
.row .column img:hover {
  filter: grayscale(0) brightness(1);
}

/* make it responsive */
@media only screen and (max-width: 800px) {
  .row .column {
    flex: 50%;
  }
}
@media only screen and (max-width: 680px) {
  .row .column {
    flex: 100%;
  }
}