li {
  &.library-card {
    @include flex-column;

    align-items: flex-start;
    background: $darker;
    border-radius: $radius * .5;
    box-shadow: $shadow;
    flex-basis: calc(50% - #{$whitespace * 4});
    margin: ($whitespace * .5) ($whitespace * 2);
    padding: $whitespace ($whitespace * 1.5);

    @media screen and (max-width: $breakpoint) {
      flex-basis: 100%;
      margin: ($whitespace * .5) $whitespace;
    }

    .title {
      @include flex-row;

      align-items: flex-end;
      width: 100%;

      a {
        @include font-regular;
        @include primary-link;

        display: block;
        font-size: 24px;
        margin: 0;
        padding: 0;

        .version {
          font-size: 14px;
        }
      }

      .stars {
        @include font-regular;

        color: $light;
        display: block;
        font-size: 14px;
        margin: auto 0 auto $whitespace;

        i {
          margin: 0 0 ($whitespace * .25);
        }

        @media screen and (max-width: $mobile-sm) {
          margin: 0;
        }
      }

      .library-options {
        display: contents;

        @media screen and (max-width: $mobile-sm) {
          display: flex;
          margin-top: 5px;
          width: 100% !important;
        }
      }
    }

    .description {
      @include font-regular;

      color: $light;
      flex-grow: 1;
      font-size: 16px;
      margin: $whitespace 0 0;
    }

    .tags {
      @include font-regular;

      color: $light;
      font-size: 12px;
      margin: ($whitespace * .5) 0 0;

      .keywords {
        display: inline-block;
        margin: 0 0 0 ($whitespace * .5);
      }
    }
  }
}
