.project-item {
  padding: 1rem;
  border-bottom: 1px solid #eee;
  background-color: $bg-content-base;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  -ms-transition: all 0.35s;
  -o-transition: all 0.35s;
  transition: all 0.35s;
  &:hover {
    background-color: #f9fafd;
  }
  .project-media {
    position: relative;
    display: inline-block;
    float: left;
    width: 500px;
    overflow: hidden;
    //@extend %boxSize;
    a{
      background-image: -webkit-linear-gradient(top,#ccc,#000);;
      background-image: linear-gradient(to top, #ccc, #000);
    }
    .top-padding {
      padding-top: 52%;
    }
    .img-box {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: block;
      img {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 100%;
        margin: auto;
      }
    }
  }
  .project-content {
    padding-left: 500px;
    .project-title {
      position: relative;
      font-size: 0.9rem;
      margin-bottom: 0.75rem;
      font-weight: bold;
    }
    .project-info {
      line-height: 1.6;
      color: #777;
      font-size: 0.7rem;
    }
  }
}