.masonry {
  position: relative;
  display: block;
  height: var(--height, 100vh);
  opacity: 0;
  transition: none;
}
.masonry.initiated {
  opacity: 1;
}
.masonry.filter-animation > [data-was-visible=true][data-visible=true] {
  transition: transform 0.4s var(--ease-in-out-cubic) var(--delay, 0s);
}
.masonry.filter-animation > [data-was-visible=true][data-visible=false] > * {
  transition: transform 0.3s ease var(--delay, 0s), opacity 0.3s ease var(--delay, 0s);
  transform: translateY(0) scale(0.9);
  opacity: 0;
}
.masonry:not(.filter-animation) [data-visible=false] {
  visibility: hidden;
}
.masonry:not(.filter-animation) [data-visible=true] {
  visibility: visible;
}
.masonry > * {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: calc(100% / var(--masonry-cols, 1));
  max-width: none !important;
  height: var(--item-height, auto);
  transform: translate(var(--x, 0%), var(--y, 0));
  backface-visibility: hidden;
  will-change: transform;
}
.masonry > * > * {
  opacity: 0;
  transform: translateY(100px);
  transition: transform 0.3s ease var(--delay, 0s), opacity 0.3s ease var(--delay, 0s);
  transition-property: transform, opacity;
  backface-visibility: hidden;
}
.masonry > *[data-visible=false] {
  pointer-events: none;
}
.masonry > *[data-visible=true] > * {
  opacity: 1;
  transform: translateY(0);
}

/*# sourceMappingURL=masonry.css.map */