mozilla/webmaker.org

.make {
  &.sample-make {
  // prevents accidental class-collisions (make is a pretty
  // common word 'round these parts)
    background: @white;
    box-shadow: 0 0 0.5rem 0.1rem rgba(0, 0, 0, 0.3);
    color: @gray-light;
    font-family: @primary-font;
    font-size: 1.4rem;
    font-weight: 300;
    position: relative;
    display: block;
    padding: 0;

    a {
      transition: color 100ms;
    }

    .make-title {
      display: inline-block;
      font-family: @primary-font;
      font-size: 2.1rem;
      font-weight: 300;
      margin: 0 0 1rem;
      @media screen and (min-width: @screen-sm-min) {
        height: auto;
        &::after {
          content: none;
        }
      }
    }
    h3, .make-meta {
      a {
        &:link, &:visited {
          color: @black;
        }
        &:hover, &:active, &:focus {
          color: @brand-info;
        }
      }
    }

    img {
      height: auto;
      margin: auto;
      max-width: 100%;
    }

    p {
      line-height: 1.3;
    }

    .make-thumbnail {
      opacity: 0.9;
      transition: opacity 100ms;
      &:hover {
        opacity: 1;
      }
    }
    .gallery-info {
      padding: 1.9rem;
    }

    .data-avatar {
      border-radius: 50%;
      float: left;
      height: 4.4rem;
      margin-right: 0.6rem;
      width: 4.4rem;
    }
    .make-description {
      @media screen and (min-width: @screen-sm-min) {
        height: auto;
        max-height: 11rem;
        -webkit-line-clamp: 100;
      }
    }

    .btn-container {
      text-align: center;
      transition: opacity 100ms ease;
    }

    .btn {
      font-size: 1.8rem;
    }

    .make-like-details {
      color: @brand-danger;
      cursor: pointer;
      display: inline-block;
      font-size: 3rem;
      margin-left: 0.5rem;
      position: relative;
      top: 0.6rem;
      &.fa-heart-o {
        color: @brand-primary;
      }
    }

    .tag-container {
      .fa-tags {
        color: @gray-light;
      }
      font-size: 1.4rem;
      margin: 0.8rem 0 1.6rem;
    }

    .tag {
      &:after {
        content: ', ';
      }
      &:last-child:after {
        content: '';
      }
    }
  }
}