.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.vid{margin:0;border-radius:18px;background:#fff;box-shadow:0 6px 22px rgba(18,48,107,.10);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
.vid-btn{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:#0F2A5F;cursor:pointer;overflow:hidden}
.vid-btn img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .3s ease}
.vid-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,42,95,0) 55%,rgba(15,42,95,.45));pointer-events:none}
.vid-play{position:absolute;left:50%;top:50%;z-index:1;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 8px 24px rgba(15,42,95,.35);transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.vid-play::before{content:"";position:absolute;left:26px;top:20px;border-left:19px solid var(--navy);border-top:12px solid transparent;border-bottom:12px solid transparent}
.vid-time{position:absolute;right:10px;bottom:10px;z-index:1;padding:2px 8px;border-radius:6px;background:rgba(15,42,95,.85);color:#fff;font-size:12px;font-weight:700}
.vid-btn:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}
.vid-btn iframe,.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid figcaption{padding:16px 18px 20px;display:flex;flex-direction:column;gap:4px}
.vid figcaption strong{font-size:16px;font-weight:800;color:var(--navy)}
.vid figcaption span{font-size:13px;line-height:1.6;color:var(--sub)}
.vid.playing .vid-btn{cursor:default}
.vid.playing .vid-btn::after{display:none}

@media (hover:hover){
  .vid:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(18,48,107,.16)}
  .vid-btn:hover img{transform:scale(1.07);filter:brightness(.92)}
  .vid-btn:hover .vid-play{transform:scale(1.14)}
}

@media (max-width:1000px){.video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .video-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .vid-play{width:56px;height:56px;margin:-28px 0 0 -28px}
  .vid-play::before{left:23px;top:17px}
}