.site-video-modal__open { position: relative; display: block; padding: 0; border: 0; background: none; color: #fff; text-decoration: none; }
.site-video-modal__preview { display: block; width: 100%; height: auto; }
.site-video-modal__icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid #fff; border-radius: 50%; background: rgb(0 0 0 / 60%); }
.site-video-modal__icon svg { width: 26px; height: 26px; fill: currentColor; }
.site-video-modal__dialog { box-sizing: border-box; position: fixed; inset: 0; margin: auto; padding: 44px 0 0; width: fit-content; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); border: 0; background: #111; color: #fff; overflow: auto; }
.site-video-modal__dialog:not([open]) { display: none; }
.site-video-modal__dialog::backdrop { background: rgb(0 0 0 / 85%); }
.site-video-modal__video { display: block; width: auto; height: auto; max-width: calc(100vw - 32px); max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); object-fit: contain; background: #000; }
.site-video-modal__close { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: #111; color: #fff; cursor: pointer; }
.site-video-modal__close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.site-video-modal__open:focus-visible, .site-video-modal__close:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.site-video-modal__message { box-sizing: border-box; max-width: 400px; margin: 0; padding: 12px; font: 14px/1.5 sans-serif; }
.site-video-modal__message[hidden] { display: none; }