.video-preview{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#0d273f}
.video-card>.video-preview{padding:0}
.video-card .video-preview video{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:contain}
.video-preview-play{display:none;position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#0d273f;cursor:pointer;color:#fff}
.video-preview.preview-ready .video-preview-play{display:block}
.video-preview.preview-playing .video-preview-play{display:none}
.video-preview-play img{display:block;width:100%;height:100%;object-fit:cover}
.video-preview-play span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#0e3b68e6;box-shadow:0 2px 16px #0005;font-size:28px;padding-left:4px}
.video-preview-play:focus-visible{outline:4px solid #98ce65;outline-offset:-4px}

html.video-screen-open{overflow:hidden}
.video-screen{position:fixed;inset:0;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#000;overflow:hidden;color:#fff}
.video-screen[open]{display:flex;align-items:center;justify-content:center}
.video-screen::backdrop{background:#000}
.video-screen video{width:100%!important;height:100%!important;max-height:none!important;object-fit:contain;background:#000}
.video-screen-close{position:absolute;z-index:2;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:48px;height:48px;border:1px solid #ffffff80;border-radius:50%;background:#000a;color:#fff;font:32px/1 sans-serif;cursor:pointer}
.video-screen-close:focus-visible{outline:3px solid #98ce65}
video:fullscreen{object-fit:contain;background:#000}