Youtube HomeContent component

Home.js

import React from 'react';
import './Home.scss';

import {SideBar} from '../SideBar/SideBar';
import {HomeContent} from './HomeContent/HomeContent';

export class Home extends React.Component {
  render() {
    return (
      <React.Fragment>
        <SideBar/>
        <HomeContent/>
      </React.Fragment>
    );
  }
}

HomeContent.js

import {VideoGrid} from '../../../components/VideoGrid/VideoGrid';
import React from 'react';
import './HomeContent.scss';

export class HomeContent extends React.Component {
  render() {
    return (
      <div className='home-content'>
        <div className="responsive-video-grid-container">
          <VideoGrid title='Trending'/>
          <VideoGrid title='Autos & Vehicles' hideDivider={true}/>
        </div>
      </div>
    );
  }
}

HomeContent.scss

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

.home-content {
  margin-left: $sidebar-left-width;
  display: grid;
  grid: auto / auto;
  justify-content: center;
}
@media all and (min-width: 476px) {
  .responsive-video-grid-container {
    max-width: 240px;
  }
}

@media all and (min-width: 700px) {
  .responsive-video-grid-container {
    max-width: 472px;
  }
}

@media all and (min-width: 900px) {
  .responsive-video-grid-container {
    max-width: 667px;
  }
}

@media all and (min-width: 1096px) {
  .responsive-video-grid-container {
    max-width: 864px;
  }
}

@media all and (min-width: 1370px) {
  .responsive-video-grid-container {
    max-width: 1096px;
  }
}

@media all and (min-width: 1370px) {
  .responsive-video-grid-container {
    max-width: 1096px;
  }
}

@media all and (min-width: 1560px) {
  .responsive-video-grid-container {
    max-width: 1284px;
  }
}