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

.pg-alien-item {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;

  &:hover {
    .pg-alien-img {
      opacity: 1;
      -webkit-animation: pgflash 1.5s;
      animation: pgflash 1.5s;
    }

    .pg-alien-title {
      &:before {
        transform: scaleX(0);
      }

      &:after {
        transform: scaleX(1);
      }
    }
  }
}

.pg-alien-img-btn {
  position: relative;
  height: 100%;
}

.pg-alien-content {
  padding: 15px 0 0;
}

.pg-alien-image-wrap {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;

  .pg-alien-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

.pg-alien-title {
  color: rgba(13, 59, 84, 0.8);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.333em;
  position: relative;
  display: inline-block;
  white-space: nowrap;
  margin: 0;
  z-index: 1;

  &:before,
  &:after {
    content: "";
    display: inline-block;
    position: absolute;
    inset-block-end: 0.15em;
    inset-inline: 0;
    z-index: -1;
    transition: transform 0.65s cubic-bezier(0.23, 1, 0.32, 1);
  }

  &:after {
    height: 0.414em;
    background-color: rgba(13, 59, 84, 0.3);
    transform-origin: start;
    transform: scaleX(0);
  }
}

.pg-alien-meta {
  color: #567687;
  margin-block-end: 5px;
}

.pg-alien-readmore {
  --pg-dir-factor: 1;
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  z-index: 10;
  width: 100%;
  display: flex;
  justify-content: end;

  :dir(rtl) & {
    --pg-dir-factor: -1;
  }

  .button-align-left & {
    justify-content: start;
  }

  .button-align-center & {
    justify-content: center;
  }

  .button-align-right & {
    justify-content: end;
  }

  a {
    color: rgba(13, 59, 84, 0.8);
    display: inline-flex;
    background: #fff;
    padding: 8px 20px;
    align-items: center;
    font-weight: 600;

    span {
      display: inline-flex;
      transition: transform 0.3s cubic-bezier(0.22, 0.665, 0.34, 0.875);
      transform: translate(calc(-1em * var(--pg-dir-factor, 1)), 0);
    }

    i {
      transition: opacity 0.4s 0.25s, transform 0.6s 0.25s;
      transition-timing-function: cubic-bezier(0.1, 0.75, 0.25, 1);
    }

    i + i {
      display: inline-flex;
      margin-inline-start: 0;
      margin-inline-end: 0;
      opacity: 0;
      transform: translate(calc(-1em * var(--pg-dir-factor, 1)), 0);
      transition-delay: 0s;
      order: -2;
    }

    &:hover {
      color: #0d3b54;
      span {
        transition-delay: 0.1s;
        transform: translate(calc(1em * var(--pg-dir-factor, 1)), 0);
      }

      i {
        opacity: 0;
        transition-delay: 0s;
        transform: translate(calc(1em * var(--pg-dir-factor, 1)), 0);
      }

      i + i {
        opacity: 1;
        transform: translate(0, 0);
        transition-delay: 0.225s;
      }
    }
  }
}

@-webkit-keyframes pgflash {
  0% {
    opacity: 0.4;
  }

  100% {
    opacity: 1;
  }
}

@keyframes pgflash {
  0% {
    opacity: 0.4;
  }

  100% {
    opacity: 1;
  }
}