.pg-trance-grid {
  display: grid;
}

.pg-trance-item {
  position: relative;
  overflow: hidden;
  text-align: center;
  &:hover {
    .pg-trance-content {
      clip-path: inset(0 0 0 0);
    }
    .pg-trance-title,
    .pg-trance-meta {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

.pg-trance-image-wrap {
  inline-size: 100%;
  block-size: 100%;
  .pg-trance-img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
}

.pg-trance-content {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  inset-block-end: 0;
  padding: 20px;
  margin: 20px;
  display: flex;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  background-color: #fff;
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
}

.pg-trance-title,
.pg-trance-meta {
  opacity: 0;
  transform: translateX(30px);
  transition: 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.1s;
}

// RTL Mode Fixes
[dir="rtl"] {
  .pg-trance-title,
  .pg-trance-meta {
    transform: translateX(-30px);
  }
  .pg-trance-design-slide-left {
    .pg-trance-title,
    .pg-trance-meta {
      transform: translateX(30px);
    }
  }
}

.pg-trance-meta {
  color: #567687;
  font-size: 14px;
  margin-bottom: 10px;
  transition-delay: 0.3s;
}

.pg-trance-title {
  color: rgba(13, 59, 84, 0.8);
  font-size: 25px;
  text-transform: capitalize;
  font-weight: 700;
  margin: 0 0 12px;
  transition-delay: 0.2s;
}

.pg-trance-design-slide-left {
  .pg-trance-content {
    clip-path: inset(0 0 0 100%);
  }
  .pg-trance-title,
  .pg-trance-meta {
    transform: translateX(-30px);
  }
}

.pg-trance-design-slide-top {
  .pg-trance-content {
    clip-path: inset(100% 0 0 0);
  }
  .pg-trance-title,
  .pg-trance-meta {
    transform: translateY(30px);
  }
}

.pg-trance-design-slide-bottom {
  .pg-trance-content {
    clip-path: inset(0 0 100% 0);
  }
  .pg-trance-title,
  .pg-trance-meta {
    transform: translateY(-30px);
  }
}