*{
   box-sizing: border-box;
 }

.thumbnail{
  width: 95%; 
  padding-top: 8px;
} 

.video-preview{
   grid-gap: 10px;
   margin: 10px;
   border: 2px solid rgb(222, 227, 232);
   background-color: rgb(255, 255, 255);
}
/*.thumbnail:hover{
   cursor: pointer;
}*/

.picture-title{
  margin-top: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 15px;
  margin-bottom: 15px;
}

.video-info-grid{
   display: grid;
   grid-template-columns: 35px 1fr;
   margin-right: 10px;
}

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

.thumbnail-row{
   margin-bottom: 18px;
   margin-left: 30px;
   position: relative;
}

.video-author,
.video-stats{
   font-size: 14px;
   color: rgb(96, 96, 96);
}

.video-author{
   margin-bottom: 4px;
}

.pictures-grid{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: 15px;
   padding: 10px;
   margin: 30px 30px;
}

@media (max-width: 800px) {
  .pictures-grid{
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 801px) and (max-width: 999px){
   .pictures-grid{
     grid-template-columns: 1fr 1fr 1fr;
   }
 }
   
@media (min-width: 1000px) {
   .pictures-grid{
     grid-template-columns: 1fr 1fr 1fr 1fr;
   }
 }


h1{
  font-weight: 500;
  font-size: 10mm;
  text-align: center;
}