.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 20px;
  row-gap: 40px;
  
  padding-left: 22px;
  padding-right: 22px;
  padding-bottom: 40px;
}

.video-thumbnail img {
  top: 0;
  left: 0;
  width: 100%;
  border: 0;
  border-radius: 12px;
  border-style: none;
}

.video-details {
  display: grid;
  grid-template-columns: 1fr;
}

.details {
  margin-left: 10px;
  margin-top: 8px;
}

.video-title {
  font-size: 16px;
  font-weight: 500;
  padding-top: 5px;
  padding-bottom: 10px;
  line-height: 20px;
}

.video-quality,
.video-year,
.video-size {
  font-size: 12px;
  margin-bottom: 5px;
  color: rgb(96, 96, 96);
}

.video-info strong {
  color: #ff6b6b;
}

.title-tag, .title-tag-1, .title-tag-2, .title-tag-3, .title-tag-4, .title-tag-5 {
  color: #000;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 4px;
  margin-left: 4px;
}

.title-tag {
  background-color: #78c2ff;
}

.title-tag-1 {
  background-color: #ff78dd;
}

.title-tag-2 {
  background-color: #a778ff;
}

.title-tag-3 {
  background-color: #78efff;
}

.title-tag-4 {
  background-color: #86ff78;
}

.title-tag-5 {
  background-color: #ffff78;
}

@media (min-width: 0px) and (max-width: 700px) {
  .video-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 701px) and (max-width: 900px) {
  .video-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .video-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}