.te-post-card {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 23px;

  &.style-1 {
    background-color: $white;
    flex-direction: row;
    justify-content: space-between;
    border-radius: 5px;
    box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.05);
    gap: 90px;
    overflow: hidden;

    @include rmaxwd(991) {
      flex-direction: column-reverse;
    }
    @include rmaxwd(1399) {
      gap: 20px;
    }

    &:before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 5px;
      height: 0;
      background-color: $primary-color;
      opacity: 0;
      visibility: hidden;
      @include transition;
    }

    .content-wrapper {
      display: flex;
      align-items: center;
      gap: 200px;
      padding: 30px 40px;

      @include rmaxwd(1199) {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px !important;
      }
      @include rmaxwd(1399) {
        gap: 50px;
      }
    }

    .image {
      width: 370px;
      height: auto;
      flex-shrink: 0;

      @include rmaxwd(991) {
        width: 100%;
        height: 350px;
      }

      img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        top: 0;
        right: 0;
      }
    }
  }


  &:hover {
    &:before {
      visibility: visible;
      opacity: 1;
      @include transition;
      height: 100%;
    }
    .te-theme-btn {
      background-color: $primary-color;
      color: $white;
    }
    .image {
      img {
        transform: scale(1.05);
        @include transition;
      }
    }
  }
  .image {
    overflow: hidden;
    border-radius: 5px;
    position: relative;

    img {
      @include transition;
      transform: scale(1);
      width: 100%;
    }

    .te-post-date {
      position: absolute;
      right: 25px;
      top: 23px;
      background-color: $primary-color;
      border-radius: 5px;
      padding: 13px 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;

      span {
        color: $white;
        font-size: 20px;
        font-weight: 700;
        line-height:initial;
      }
    }
  }
  .content {
    //display: flex;
    //flex-direction: column;
    //justify-content: space-between;
    //width: 100%;
    position: relative;
    z-index: 3;

    p {
      margin-bottom: 0;
    }
    .te-post-meta-info {
      display: inline-flex;
      gap: 10px 20px;
      align-items: center;
      margin-bottom: 12px;
      flex-wrap: wrap;

      .te-single-meta {
        display: flex;
        align-items: center;
        gap: 8px;

        span,
        a {
          color: $gray-800;
          font-size: 18px;
          line-height: 28px;
          font-weight: 400;
          margin: 0;
          text-transform: capitalize;
        }
        i {
          color: $primary-color;
        }
      }
    }
    .title {
      font-size: 26px;
      font-weight: 900;
      line-height: 39px;
      font-family: $heading-font;
      margin-bottom: 7px;
      color: $secondary-color;
      @include transition;
    }
  }
}