body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #eceffc;
}

* {
  box-sizing: border-box;
}

.masonry {
  --block-color: #434a54;
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
  grid-auto-rows: 50px;
  gap: 16px;
  width: 960px;

  &__item {
    position: relative;

    &[short] {
      grid-row: span 2;
    }

    &[tall] {
      grid-row: span 3;
    }

    &[taller] {
      grid-row: span 4;
    }
  }

  .block-reveal {
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      transform: scale(0);
      animation: scale-in 0.9s calc(0.4s + 0.1s * var(--i))
        var(--ease-out-cubic) forwards;
    }

    &::before {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      background: var(--block-color);
      opacity: 0;
      transform: translateX(101%);
      animation: slide-left 0.8s calc(0.1s * var(--i)) var(--ease-out-cubic)
        forwards;
    }
  }
}

@keyframes slide-left {
  // use this trick to fix ios bug.
  0.001% {
    opacity: 1;
  }

  50% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 1;
    transform: translateX(-101%);
  }
}

@keyframes scale-in {
  from {
    transform: scale(0.8);
  }

  to {
    transform: scale(1);
  }
}

// https://css-tricks.com/making-animations-wait/
.js-loading *,
.js-loading *::before,
.js-loading *::after {
  animation-play-state: paused !important;
}

.js-loading .loading {
  * {
    animation-play-state: running !important;
  }
}

.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  display: flex;
  color: black;
  font-size: 2rem;
  font-family: Lato, sans-serif;
  letter-spacing: 0.5rem;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  transition: 0.3s;

  span {
    animation: shrink 2s infinite;
  }
}

@keyframes shrink {
  50% {
    transform: scale(0);
  }
}
