VideoPreview component in Youtube app

shared.scss

/* ... */
$text-color-dark: #111111;

VideoPreview.js

import React from 'react';
import {Image} from 'semantic-ui-react';
import './VideoPreview.scss';

export class VideoPreview extends React.Component {
  render() {
    return (
      <div className='video-preview'>
        <div className='image-container'>
          <Image src='http://via.placeholder.com/210x118'/>
          <div className='time-label'>
            <span>05:22</span>
          </div>
        </div>

        <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>
      </div>
    );
  }
}

VideoPreview.scss

@import '../../styles/shared.scss';

.video-preview {
  display: grid;
  grid: 118px auto / 210px;
}

.video-info {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  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;
  }
}

.image-container {
  position: relative;
  grid-row: 1 / 2;
  grid-column: 1 / 2;

  /* Video duration label at bottom right */
  .time-label {
    position: absolute;
    background: $text-color-dark;
    bottom: 0;
    right: 0;
    opacity: 0.8;
    border-radius: 2px;
    font-weight: 500;
    color: white;
    margin: 4px;
    padding: 2px 4px;
    line-height: 12px;
  }
}