.pg-lumen-grid {
  display: grid;
}
.pg-lumen-item {
  position: relative;
  perspective: 840px;
  overflow: hidden;

  &:hover {
    .pg-lumen-img {
      transform: scale3d(1.1, 1.1, 1.1);
    }
    .pg-lumen-title,
    .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;
  inset: 0;
  pointer-events: none;
  // background-color: #fff;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.pg-lumen-title {
  margin-block: 0 8px;
  margin-inline: 0;
  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-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);
  }
}