VideoPreview

VideoPreview.js

{/*image container ends here*/}
<div className='video-info'>
  <div className='semi-bold show-max-two-lines'>Video title</div>
  <div className='video-preview-metadata-container'>
    <div className='channel-title'>Channel title</div>
    <div><span>2.1M views • 2 days ago</span></div>
  </div>
</div>

VideoPreview.scss

/*
place this at the top level
Rest of the file unchanged
*/

.video-info {
  color: $text-color-dark;

  .video-preview-metadata-container {
    padding-top: 5px;
    font-size: 13px;
    color: #6E6E6E;

    .channel-title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .show-max-two-lines {
    overflow: hidden;
    line-height: 1.4em;
    max-height: 2.8em;
  }

  .semi-bold {
    font-weight: 600;
  }
}