.waterfall {
/*   width: 80vw;
  margin: 10em 0; */
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  height:100%;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  grid-gap: 1em;
  grid-auto-flow: row dense;
  grid-auto-rows: 10vh;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.waterfall::-webkit-scrollbar {
  display: none;
}

.waterfall .item:nth-of-type(3n+1) {
  grid-row: auto / span 3;
}
.waterfall .item:nth-of-type(3n+2) {
  grid-row: auto / span 4;
}
.waterfall .item:nth-of-type(3n+3) {
  grid-row: auto / span 5;
}
.waterfall .item {
  overflow: hidden;
  opacity: 0.5;
  -webkit-transform: rotate(-7.5deg);
          transform: rotate(-7.5deg);
  -webkit-filter: saturate(0) contrast(10) brightness(0.2);
          filter: saturate(0) contrast(10) brightness(0.2);
  -webkit-transition: border 0.1s, -webkit-transform 0.2s;
  transition: border 0.1s, -webkit-transform 0.2s;
  transition: transform 0.2s, border 0.1s;
  transition: transform 0.2s, border 0.1s, -webkit-transform 0.2s;
  box-sizing: border-box;
  border: 1em solid transparent;
}
.waterfall .item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.waterfall .item:hover {
  opacity: 1;
  -webkit-transform: rotate(0);
          transform: rotate(0);
  -webkit-filter: none;
          filter: none;
  border-bottom: 1px solid #800000;
}
.waterfall .item.inbound {
  opacity: 1;

  -webkit-transform: rotate(0);
          transform: rotate(0);
  -webkit-filter: none;
          filter: none;
  border-bottom: 1px solid #800000;
}
.waterfall .item.inbound img {
  opacity: 1;

  -webkit-transform: rotate(0);
          transform: rotate(0);
}