/* === MASONRY == */
.grid {
  margin: 0 auto;
  display: block;
}

.grid-item {
  margin-bottom: 4px;
}

@media (max-width: 500px) {
  .grid { padding-left: 0px;}
  .grid-sizer,
  .grid-item {
    width: 140px;
    height: auto;
    border: 0px solid red;
  }
}

@media (min-width: 500px) and (max-width: 800px) {
  .grid-sizer,
  .grid-item {
    width: 180px;
    height: auto;
    border: 0px solid orange;
  }
}

@media (min-width: 800px) {
  .grid-sizer,
  .grid-item {
    width: 228px;
    height: auto;
    border: 0px solid green;
  }
}

.grid>.grid-item>img {
  width: 100%;
  height: 100%;
}

/* grid images effects */
.grid .grid-item img {
  cursor: pointer;
  border: 3px solid transparent;
  border-radius: 5px;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.grid .grid-item img:hover {
  border: 3px solid #AD2855;
}