[div=osts]
[div=ost][div=url]https://www.youtube.com/watch?v=2upuBiEiXDk&list=PLefdRk7uGDoWlzP9Kqg1y2JtsGufTILnc&index=31[/div][div=name]Blue Bird[/div][/div]
[div=ost][div=url]https://www.youtube.com/watch?v=EBNl8bwdVcA&list=PLefdRk7uGDoWlzP9Kqg1y2JtsGufTILnc&index=25[/div][div=name]Hero's Come Back[/div][/div]
[/div]

.osts {
  text-align: center;
}
.ost {
  display: inline-flex;
  position: relative;
  flex-direction: column;
  width: calc((100% - (var(--osts-gap) * var(--osts-columns))) / var(--osts-columns));
  --osts-gap: 4px;
  --osts-columns: 4;
  margin: 0 var(--osts-gap) 8px 0;
}
@media screen and (min-width:768px) and (max-width: 1024px) {
  .ost {
    --osts-columns: 4;
  }
}
@media screen and (min-width:500px) and (max-width: 767px) {
  .ost {
    --osts-columns: 3;
  }
}
@media screen and (min-width:380px) and (max-width: 499px) {
  .ost {
    --osts-columns: 2;
  }
}
@media screen and (max-width: 379px) {
  .ost {
    --osts-columns: 1;
  }
}
.url {
  display: inline-block;
}
.name {
  display: inline-block;
}
@media screen and (max-width: 767px) {
  .osts {
    max-height: 340px;
    overflow-y: scroll;
  }
}