.post-card {
  @apply bg-white border border-primary p-6 block;
  transition: transform 0.3s ease-out;
  &:hover {
    transform: translateY(-4px);
  }

  &--has-thumbnail {
    @apply grid  gap-6;
    grid-template-columns: 1fr 3fr;
  }

  &__thumbnail {
    @apply bg-white border border-solid border-primary p-2 h-fit grayscale hover:grayscale-0;
    transition: all 0.3s ease-out;
    img {
      aspect-ratio: 108/137;
      @apply w-full  bg-green-400 object-cover;
      height: auto;
    }
  }

  &:hover .post-card__thumbnail {
    @apply !grayscale-0;
  }

  h3.card__title {
    @apply mb-6;
  }
  .card__details {
    @apply flex flex-col gap-3;

    &:has(.card__thumbnail) {
      @apply grid  gap-6;
      grid-template-columns: 3fr 1fr;
    }
    .card__thumbnail {
      @apply bg-white border border-solid border-primary p-2;
      img {
        aspect-ratio: 4/5;
        @apply w-full h-auto  bg-green-400 object-cover;
      }
    }
  }

  time.date {
    @apply text-primary capitalize;
  }
  .author {
    @apply text-primary;
  }

  &__authors {
    /* @apply flex flex-wrap gap-2; */
    @apply flex flex-wrap gap-x-8 gap-y-2;
    li {
      @apply text-lg flex items-center gap-2;

      &::before {
        @apply w-6 h-6 block  bg-no-repeat bg-center bg-contain;
        content: '';
        @apply filter-primary;
      }

      &.author::before {
        background-image: url('../resources/img/icons/carhop-plume2.svg');
      }
      &.editor::before {
        background-image: url('../resources/img/icons/carhop-bookmark.svg');
      }
    }
  }
  &__details-text {
    @apply flex flex-col gap-2;
  }

  .tag-list {
    @apply flex flex-wrap gap-2 mt-4;
    &__tag {
      @apply text-primary bg-white border border-solid border-primary px-4 py-2;
      &:hover {
        @apply bg-primary text-white;
      }
    }
  }
}