.video-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.video-grid.columns-1{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
.video-grid.columns-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.video-grid.columns-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.video-grid.columns-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 800px){
  .video-grid.columns-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video-grid.columns-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video-grid.columns-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px){
  .video-grid.columns-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video-grid.columns-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .video-grid.columns-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.video-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.video-embed{
  aspect-ratio: 16 / 9;
  background: #111;
}
.video-iframe{
  width: 100%;
  height: 100%;
  border: 0;
}
.video-body{ padding: 12px 14px; }
.video-meta{ color: var(--muted); font-weight: 900; font-size: 12px; }
.video-title{ margin: 6px 0 0; font-weight: 900; font-size: 16px; }
.video-desc{ margin: 8px 0 0; color: var(--ink); font-weight: 700; }
.video-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.video-tab{
  border:1px solid rgba(0,0,0,0.12);
  background:#fff;
  border-radius: 999px;
  padding:8px 14px;
  font-weight:800;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.video-tab.is-active{
  background: var(--accent);
  color:#fff;
  border-color: var(--accent);
}