.video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.875rem; }
.video-item h2 { position: relative; margin-block-end: 1.25rem; padding-block-end: .6rem; border-block-end: 1px solid var(--line); font-size: 1rem; line-height: 1.6; }
.video-item h2::after { content: ''; position: absolute; inset-inline-start: 0; inset-block-end: -1px; width: 3rem; height: 2px; background: var(--primary); }
.video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-thumb { position: absolute; inset: 0; display: block; }
.video-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-play { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; width: 16%; max-width: 8.5rem; aspect-ratio: 3 / 2; transform: translate(-50%, -50%); background: rgba(33, 33, 33, .8); transition: background .2s ease; }
[dir="rtl"] .video-play { transform: translate(50%, -50%); }
.video-play::before { content: ''; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; width: 36%; aspect-ratio: 1; transform: translate(-50%, -50%); background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); }
[dir="rtl"] .video-play::before { transform: translate(50%, -50%); }
.video-thumb:hover .video-play, .video-thumb:focus-visible .video-play { background: rgba(33, 33, 33, .95); }
.video-grid .empty-note { grid-column: 1 / -1; color: var(--muted); }

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