Youtube in React: trending videos

Trending.js

import React from 'react';
import './Trending.scss';
import {VideoPreview} from '../../components/VideoPreview/VideoPreview';
import {SideBar} from '../SideBar/SideBar';

export class Trending extends React.Component {
  render() {
    const previews = this.getVideoPreviews();
    return (
      <React.Fragment>
        <SideBar/>
        <div className='trending'>
          {previews}
        </div>
      </React.Fragment>
    );
  }

    getVideoPreviews() {
      return this.props.videos.map(video => (
        <VideoPreview horizontal={true} expanded={true} video={video} key={video.id} pathname={'/watch'}
                      search={'?v=' + video.id}/>)
      );
  }
}

export default Trending;

Trending.scss

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

.trending {
  display: grid;
  grid: auto / auto;
  padding-left: 10rem;
  padding-top: 24px;
  margin-left: $sidebar-left-width;
  grid-row-gap: 10px;
  max-width: 900px;
}

@media(max-width: 1200px) {
  .trending {
    padding-left: 10px;
  }
}