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

.pg-ranch-item {
  position: relative;
  overflow: hidden;
  &:hover {
    .pg-ranch-content {
      transform: translateY(0);
    }
    .pg-social-icon {
      a {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .pg-ranch-meta,
    .pg-ranch-title {
      opacity: 1;
      transform: translateY(0);
    }
    .pg-ranch-meta {
      span {
        // margin-left: 25px;
        transition-delay: 0.4s;
        &::before {
          inline-size: 18px;
          opacity: 1;
          transition-delay: 0.4s;
        }
      }
    }
  }
}

.pg-ranch-image-wrap {
  inline-size: 100%;
  block-size: 100%;
  img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    vertical-align: middle;
  }
}

.pg-ranch-content {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  background-color: #fff;
  overflow: hidden;
  // text-align: start;
  inline-size: 65%;
  padding: 20px;
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
}

.pg-social-icon {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: flex;
  flex-direction: column;
  grid-row-gap: 6px;
  margin: 30px;
  z-index: 1;
}

.pg-social-icon {
  a {
    position: relative;
    opacity: 0;
    transform: translateY(30px);
    transition: 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    display: inline-block;
    &:nth-child(1) {
      transition-delay: 0.1s;
    }

    &:nth-child(2) {
      transition-delay: 0.15s;
    }

    &:nth-child(3) {
      transition-delay: 0.2s;
    }

    &:nth-child(4) {
      transition-delay: 0.25s;
    }

    span {
      font-size: 12px;
      padding: 8px 10px;
      color: #0d3b54;
      text-align: center;
      position: relative;
      display: inline-block;
      background-color: #fff;
      overflow: hidden;
      border-radius: 10px;
      &::before {
        content: "";
        inline-size: 120%;
        inset-block-start: 90%;
        inset-inline-start: -110%;
        block-size: 120%;
        position: absolute;
        transform: rotate(45deg);
        background-color: #0d3b54;
        transition: all 0.35s;
        transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
      }
      svg {
        fill: #0d3b54;
      }
    }
    svg,
    i {
      position: relative;
      z-index: 1;
    }

    &:hover {
      span {
        color: #fff;
        &::before {
          inset-block-start: -10%;
          inset-inline-start: -10%;
        }
        svg {
          fill: #fff;
        }
      }
    }
  }
}

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

.pg-ranch-title {
  transition-delay: 0.1s;
  font-size: 22px;
  font-weight: 700;
  text-transform: capitalize;
  margin: 0;
  margin-block-end: 3px;
  color: rgba(13, 59, 84, 0.8);
}

.pg-ranch-meta {
  transition-delay: 0.2s;
  font-size: 14px;
  text-transform: capitalize;
  color: #567687;
  position: relative;

  span {
    margin-inline-start: 0;
    transition: margin-inline-start 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    &::before {
      position: absolute;
      content: "";
      inset-block-start: 58%;
      inset-inline-start: -24px;
      inline-size: 0;
      block-size: 1px;
      opacity: 0;
      background-color: #567687;
      transition: inline-size 0.6s cubic-bezier(0.25, 1, 0.5, 1),
        opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    }
  }
}

.pg-ranch-meta-line-yes .pg-ranch-item:hover .pg-ranch-meta span {
  margin-inline-start: 25px;
}