.master-detail {  
  $master-detail-border-color: $base-border-color;
  $master-detail-background: lighten($master-detail-border-color, 10);
  $master-detail-height: 400px;
  $master-detail-border: 1px solid $master-detail-border-color;
  
  border-radius: $base-border-radius;
  @include clearfix;
  margin-bottom: $base-line-height;
  border: $master-detail-border;  

  .master {
    @include media($medium-screen) {
      width: 30%;
      float: left;
      background-color: $master-detail-background;
    }
    ul {
      height: $master-detail-height;
      overflow: scroll;
      overflow-x: hidden;

      li {
        padding: 1em;
        border-bottom: $master-detail-border;
        border-right: $master-detail-border;
        
        &:last-child {
          border-bottom: 0;
        }

        p {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }

  .detail {
    height: $master-detail-height;
    display: none;

    @include media($medium-screen) {
      width: 70%;
      float: right;
      padding: 1em;
      display: block;
    }
  }
}