@import './variables.scss';

.post-item-container {
  @apply mb-8 p-6 rounded shadow-light;
  @apply dark:shadow-dark;
  @apply hover:shadow-light-heavier dark:hover:shadow-dark-heavier;

  .title {
    @apply relative mb-2 inline-block;

    &:after {
      @apply absolute left-0 -bottom-2 w-full;

      content: "";
      height: 2px;
      visibility: hidden;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      transition: 0.3s ease-in-out;
      @apply bg-reco-brand;
    }

    &:hover a {
      @apply text-reco-brand;
    }

    &:hover:after {
      visibility: visible;
      transform: scaleX(1);
    }
  }

  .page-info {
    @apply mt-2;
  }
}