.pg-lumen-grid {
  display: grid;
}
.pg-lumen-item {
  position: relative;
  perspective: 840px;
  overflow: hidden;
}
.pg-lumen-item:hover .pg-lumen-img {
  transform: scale3d(1.1, 1.1, 1.1);
}
.pg-lumen-item:hover .pg-lumen-title,
.pg-lumen-item:hover .pg-lumen-meta {
  transform: translateY(0);
  opacity: 1;
}
.pg-lumen-content {
  transform: rotate3d(1, 0, 0, 90deg);
  width: 100%;
  height: 100%;
  padding: 20px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.pg-lumen-title {
  margin: 0 0 8px;
  font-size: 20px;
  color: rgba(13, 59, 84, 0.8);
  text-transform: capitalize;
  line-height: 1.6;
  font-weight: 700;
}
.pg-lumen-title,
.pg-lumen-meta {
  transform: translateY(-40px);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0, 0, 0.2, 1), opacity 0.5s cubic-bezier(0, 0, 0.2, 1);
}
.pg-lumen-meta {
  font-size: 14px;
  line-height: 1.5;
  color: #567687;
}
.pg-lumen-image-wrap {
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.pg-lumen-image-wrap .pg-lumen-img {
  width: 105%;
  height: 105%;
  object-fit: cover;
  vertical-align: middle;
  transition: all 1s cubic-bezier(0, 0, 0.2, 1);
}
.in-top .pg-lumen-content {
  transform-origin: 50% 0%;
  animation: in-top 300ms ease 0ms 1 forwards;
}
.in-right .pg-lumen-content {
  transform-origin: 100% 0%;
  animation: in-right 300ms ease 0ms 1 forwards;
}
.in-bottom .pg-lumen-content {
  transform-origin: 50% 100%;
  animation: in-bottom 300ms ease 0ms 1 forwards;
}
.in-left .pg-lumen-content {
  transform-origin: 0% 0%;
  animation: in-left 300ms ease 0ms 1 forwards;
}
.out-top .pg-lumen-content {
  transform-origin: 50% 0%;
  animation: out-top 300ms ease 0ms 1 forwards;
}
.out-right .pg-lumen-content {
  transform-origin: 100% 50%;
  animation: out-right 300ms ease 0ms 1 forwards;
}
.out-bottom .pg-lumen-content {
  transform-origin: 50% 100%;
  animation: out-bottom 300ms ease 0ms 1 forwards;
}
.out-left .pg-lumen-content {
  transform-origin: 0% 0%;
  animation: out-left 300ms ease 0ms 1 forwards;
}
@keyframes in-top {
  from {
    transform: rotate3d(-1, 0, 0, 90deg);
  }
  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-right {
  from {
    transform: rotate3d(0, -1, 0, 90deg);
  }
  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-bottom {
  from {
    transform: rotate3d(1, 0, 0, 90deg);
  }
  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-left {
  from {
    transform: rotate3d(0, 1, 0, 90deg);
  }
  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes out-top {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(-1, 0, 0, 104deg);
  }
}
@keyframes out-right {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, -1, 0, 104deg);
  }
}
@keyframes out-bottom {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 0, 0, 104deg);
  }
}
@keyframes out-left {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, 1, 0, 104deg);
  }
}