.pg-walden-grid {
  display: grid;

  /* Direction factor */
  --pg-dir-factor: -1; // LTR default
  :dir(rtl) & {
    --pg-dir-factor: 1;
  }

  .pg-walden-item {
    position: relative;
    overflow: hidden;
    text-align: center;

    &:hover {
      .pg-walden-image-wrap {
        img {
          transform: scale(1.5);
        }
      }

      .pg-walden-head-content {
        opacity: 1;
        transform: translateY(0);
      }

      .pg-walden-readmore {
        opacity: 1;
        transform: translate(calc(50% * var(--pg-dir-factor)), -50%) scale(1);
      }

      .pg-walden-follow-btn,
      .pg-walden-like-btn {
        opacity: 1;
        transform: translateX(0);
      }
    }
  }

  .pg-walden-image-wrap {
    inline-size: 100%;
    block-size: 100%;
    position: relative;
    overflow: hidden;

    img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      transform: scale(1);
      transition: transform 0.5s ease-out;
    }
  }

  /* ================= Effect Style 1 ================= */
  &.pg-walden-effect-style-1 {
    .pg-walden-item:hover {
      .pg-walden-image-wrap::before,
      .pg-walden-image-wrap::after {
        transform: translate(calc(50% * var(--pg-dir-factor)), -50%) scale(1, 1);
      }
    }

    .pg-walden-image-wrap {
      &::before,
      &::after {
        content: "";
        position: absolute;
        inline-size: 150%;
        block-size: 150%;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        transform: translate(calc(50% * var(--pg-dir-factor)), -50%) scale(0, 0);
        border-radius: 50%;
        box-sizing: border-box;
        z-index: 1;
      }

      &::after {
        transition: transform 1.2s ease;
        background: #0d3b54;
      }

      &::before {
        transition: transform 0.5s ease-out;
        background: rgba(13, 59, 84, 0.8);
      }
    }
  }

  /* ================= Effect Style 2 ================= */
  &.pg-walden-effect-style-2 {
    .pg-walden-item:hover {
      .pg-walden-image-wrap::before {
        transition-delay: 0s;
        transform: translate(calc(50% * var(--pg-dir-factor)), -50%)
          rotate(-300deg) scale(4.5);
      }
    }

    .pg-walden-image-wrap {
      &::before {
        content: "";
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        inline-size: 100%;
        block-size: 100%;
        z-index: 2;
        box-sizing: border-box;
        background-size: contain;
        background-repeat: no-repeat;
        transform-origin: center;
        background-image: url(../images/animation.svg);
        transform: translate(calc(50% * var(--pg-dir-factor)), -50%)
          rotate(0deg) scale(0);
        transition: transform 0.4s ease-in;
      }
    }
  }
}

/* ================= Content ================= */

.pg-walden-head-content {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  margin: 30px;
  z-index: 3;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}

.pg-walden-title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  text-transform: capitalize;
  color: #fff;
}

.pg-walden-bottom-content {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  margin: 30px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  grid-column-gap: 15px;
}

.pg-walden-follow-btn {
  opacity: 0;
  transform: translateX(calc(100px * var(--pg-dir-factor)));
  transition: all 0.5s ease;
}

.pg-walden-like-btn {
  opacity: 0;
  transform: translateX(calc(-100px * var(--pg-dir-factor)));
  transition: all 0.5s ease;
}

/* ================= Read More ================= */

.pg-walden-readmore {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  opacity: 0;
  transform: translate(calc(50% * var(--pg-dir-factor)), -50%) scale(0.5);
  transition: all 0.5s ease;
  z-index: 3;

  a {
    color: rgba(13, 59, 84, 0.8);
    font-size: 12px;
    background: #fff;
    padding: 15px 17px;
    border-radius: 50%;
    transition: all 0.3s ease;

    &:hover {
      background: #0d3b54;
      color: #fff;
    }
  }
}