p {
        /*Before using fonts, make sure to download them on google fonts*/
        /*Unless you are using Arial or any other built in fonts*/
        font-family: Roboto, Arial;
        margin-top: 0;
        margin-bottom: 0;
      }
  
      .color-block {
        width: 30px;
        height: 30px;
        
      }

      .thumbnail{
       width: 100%;
       
      }

      .video-title{
        margin-top: 0;
        font-size: 14px;
        font-weight: 500;
       line-height: 20px;
       margin-bottom: 10px;
      }

      .video-info-grid{
        display: grid;
        grid-template-columns: 50px 1fr;
      }

      .profile-picture{
        width: 36px;
        border-radius: 50px;
      }

      .thumbnail-row{
        margin-bottom: 8px;
        position: relative;
      }
      
      .video-author,
      .video-stats{
        font-size: 12px;
        color: rgb(96, 96, 96);
      }
      
        .video-author{
          margin-bottom: 4px;
        }

        .video-grid{
          font-family: Roboto, Arial;
          display: grid;
          grid-template-columns: 1fr 1fr 1fr ;
          column-gap: 15px;
          row-gap: 25px;}

        @media (max-width: 750px) {
          .video-grid {
            grid-template-columns: 1fr 1fr;
          }
        }
        
 @media (max-width: 751px) and (max-width:
999px) {
   .video-grid {
 grid-template-columns: 1fr 1fr 1fr;
 }
 }


 @media (min-width: 1000px) {
 .video-grid {
 grid-template-columns: 1fr 1fr 1fr 1fr;
 }
}

  .video-time {
 font-size: 12px;
 font-family: 500;
 padding: 4px;
 margin: 4px;
 border-radius: 2px;
 background-color: black;
 color: white;
 position: absolute;
 bottom: 8px;
 right: 5px;
         }