@use '../helpers/functions' as *;

.post {
  &-preview {
    width: 100%;
    height: 0;
    padding-bottom: 50%;
    margin-bottom: $spacer * 1.5;
    overflow: hidden;

    img {
      width: 100%;
    }
  }

  &-title {
    font-size: $spacer * 1.5;
    line-height: rem(34);
    color: $neutral-20;
    margin-bottom: rem(12);
  }

  &-description {
    display: -webkit-box;
    max-height: $spacer * 4.5;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: $neutral-30;
    margin-bottom: rem(12);
  }

  &-about {
    display: flex;
    justify-content: flex-start;
    gap: $spacer * 0.5;
    font-size: rem(14);
    line-height: rem(21);
    color: $neutral-50;

    p {
      margin-bottom: 0;
    }
  }

  &-link:hover {
    .post-title {
      color: $primary-50;
    }

    .post-preview > img {
      transform: scale(1.1);
      transition: all 0.25s ease-in-out;
    }
  }
}