.vh-blog-post {
  position: relative;
  &__img {
    display: block;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    &:hover {
      .vh-blog-post__img-is {
        transform: scale(1.01);
      }
    }
    &-is {
      width: 100%;
      max-width: 100%;
      height: 270px;
      object-fit: cover;
      border-radius: 10px 10px 0 0;
      transition: all 0.3s ease;
    }
  }
  &__body {
    padding: 15px;
    background: $alpha;
    border-radius: 0 0 10px 10px;
    @include xl-screen {
      padding: 30px;
    }
  }
  &__title {
    color: $white;
    @include xl-screen {
      display: -webkit-box !important;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      white-space: normal;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
    }
    &:hover {
      color: $primary;
    }
  }
  &__article {
    @include xl-screen {
      display: -webkit-box !important;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      white-space: normal;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
    }
  }
  &__hr {
    background: rgba($white, 0.5);
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  &__meta {
    display: flex;
    align-items: center;
    &-icon {
      font-size: 20px;
      line-height: 1;
      background: -webkit-linear-gradient(0deg, $bg-8 0%, $bg-7 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    &-text {
        font-size: 14px;
    }
  }
  &__share {
    display: block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    border-radius: 50%;
    text-align: center;
    background: linear-gradient(0deg, $bg-8 0%, $bg-7 100%);
    color: $white;
    transition: all .3s ease;
    &:hover {
      color: $white;
      box-shadow: 0 10px 15px rgba($dark, .5);
    }
  }
}
