.grid-sizer, .grid-item {
  width: 25%;
}
.grid-item {
  padding-top: 25%;
}
.grid-item.wide, .grid-item.large {
  width: 50%;
}
.grid-item.large, .grid-item.tall {
  padding-top: 50%;
}
.grid-item .grid-item-inner {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 5px;
  top: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  background-size: cover;
  background-position: center;
  background-color: #f2f2f2;
  opacity: 0;
}
.is-admin .grid-item .grid-item-inner {
  opacity: 1;
}
.masonry-grid.grid-loaded .grid-item .grid-item-inner {
  opacity: 1;
  transition: opacity 1s ease 100ms;
}
.grid-item-inner::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #0a0a0a;
  opacity: 0;
  transition: opacity .3s ease-in-out;
}
.grid-item-inner:hover::before {
  opacity: 0.4;
}
.masonry-grid .grid-item .grid-item-inner h2 {
  display: inline-block;
  color: #fff;
  z-index: 1;
  text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
  font-size: 25px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
@media only screen and (max-width: 991px) {
  .grid-item, .grid-item.wide, .grid-item.large, .grid-item.tall {
    width: 50%;
    padding-top: 50%;
  }
}
@media only screen and (max-width: 579px) {
  .grid-item, .grid-item.wide, .grid-item.large, .grid-item.tall {
    width: 100%;
    padding-top: 66%;
  }
  .grid-item .grid-item-inner {
  height: calc(100% - 1.5rem);
}	
}
/* admin only */
.masonry-grid.is-admin {
  opacity: 1 !important;
  display: inline-block;
  width: 100%;
}
.masonry-grid.is-admin .grid-item {
  position: relative;
  padding: 5px !important;
  width: 25% !important;
  max-height: 400px;
  float: left;
}
.masonry-grid.is-admin .grid-item .grid-item-inner {
  pointer-events: none;
  position: relative;
  left: unset;
  top: unset;
  width: 100%;
  height: 300px;
  display: block;
}