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

.contentContainer {
  cursor: pointer;
  height: 100%;
  .tagArea {
    .tag {
      @include p2;
      color: $blue;
    }
    a + a:before {
      content: "";
      font-size: 0;
      padding: 0.625rem 0.1875rem 1px;
      margin-left: 0.375rem;
      border-left: 1px solid $blue;
    }
  }
  .linkArea {
    position: relative;
    display: block;
    padding-bottom: 2.5rem;
    flex: 1;
    h4 {
      @include h4;
    }
    .description {
      @include p1;
      opacity: 0.8;
    }
    .keywordsArea {
      padding-top: 1rem;
      font-size: 0.75rem;
      opacity: 0.6;
      .keyword {
        display: inline-block;
        height: 1.5rem;
        vertical-align: middle;
        background: rgba(233, 234, 238, 0.6);
        border-radius: 2px;
        & > p {
          line-height: 2.33;
        }
      }
      .keyword:after {
        content: "";
        display: inline-block;
        height: 100%;
        vertical-align: middle;
      }
    }
    hr {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(255, 255, 255, 0.01);
      box-shadow: inset 0px -1px 0px rgba(44, 44, 44, 0.15);
    }
  }
}