@import "@/styles/variables.scss";
@import "@/styles/mixins.scss";

.container {
  @include flex(flex-start, stretch, column, nowrap);
  .item {
    border-bottom: 1px solid $lineColor;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    .category {
      font-size: 0.875rem;
      //color: $font-color-4;
      color: $B1;
    }
    .h4 {
      margin-bottom: 0.5rem;
      color: $font-color-10;
      @include h4;
      .customLink {
        &:hover {
          color: $blue;
        }
      }
    }
    .p1 {
      margin-bottom: 0.5rem;
      color: $font-color-6;
      @include p1;
    }
    .footerBar {
      font-size: 0.875rem;
      color: $font-color-4;
      @include flex(flex-start, center);
      .info {
        margin-bottom: 0.5rem;
        @include flex(flex-start, center);
      }
      .date {
        margin-right: 2rem;
      }
      .author {
        margin-right: 2rem;
      }
      .tags {
        margin-bottom: 0.5rem;
        @include flex(flex-start, center);
        .tag {
          position: relative;
          margin-right: 1rem;
          cursor: pointer;
          &::after {
            content: " ";
            height: 16px;
            width: 1px;
            background: $lineColor;
            position: absolute;
            top: 50%;
            right: -0.5rem;
            transform: translate(0, -50%);
          }
          &:last-of-type::after {
            display: none;
          }
          &:hover {
            color: $blue;
          }
        }
      }
      @media screen and (max-width: $mobile) {
        @include flex(flex-start, flex-start, column);
      }
    }
  }
}