.bb-gallery-video { margin-top: .5rem; }
.bb-gallery-video__photo { display: none; }
.gallery-slider-row:has(> .bb-gallery-video) { position: relative; }
.gallery-slider-row > .bb-gallery-video.bb-gallery-video--inline {
    position: absolute; z-index: 2; margin: 0; padding: 0;
    left: var(--bb-video-x); top: var(--bb-video-y);
    width: var(--bb-video-width); height: var(--bb-video-height);
}
.bb-gallery-video__tile {
    position: relative; display: inline-grid; place-items: center;
    width: var(--bb-video-width, 98px); height: var(--bb-video-height, 75px); background: #292929; overflow: hidden;
    border: 1px solid #d5d5d5; vertical-align: middle;
}
.bb-gallery-video:not(.bb-gallery-video--inline) .bb-gallery-video__tile { margin-left: var(--bb-video-inset, 0px); }
.bb-gallery-video__tile img { width: 100%; height: 100%; object-fit: cover; }
.bb-gallery-video__tile:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.bb-gallery-video__play {
    position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    background: rgba(0, 0, 0, .83); color: #fff; font-size: 16px; padding-left: 2px;
}
.bb-gallery-video__dialog {
    border: 0; padding: .75rem; color: #fff; background: #161616;
    width: min(880px, calc(100% - 1.5rem), 140vh);
    max-height: calc(100% - 1.5rem); overflow: auto;
}
.bb-gallery-video__dialog::backdrop { background: rgba(0, 0, 0, .76); }
.bb-gallery-video__toolbar { display: flex; justify-content: flex-end; margin-bottom: .5rem; }
.bb-gallery-video__close {
    border: 1px solid #fff; background: transparent; color: #fff; min-width: 44px; min-height: 44px;
}
.bb-gallery-video__screen { aspect-ratio: 16 / 9; background: #000; }
.bb-gallery-video__screen iframe { width: 100%; height: 100%; display: block; border: 0; }
.bb-gallery-video__fallback { display: inline-block; margin-top: .5rem; color: #fff; text-decoration: underline; }

@media (max-width: 767.98px) {
    .gallery-slider-row.bb-gallery-video--mobile-ready > .gallery-slider-thumbnails-col { display: none; }
    .bb-gallery-video--mobile-ready .bb-gallery-video__strip {
        display: flex; gap: 8px; overflow-x: auto; padding: 3px 3px 6px;
        scroll-snap-type: x proximity;
    }
    .bb-gallery-video--mobile-ready .bb-gallery-video__strip > * {
        display: inline-grid; place-items: center; flex: 0 0 72px; width: 72px; height: 60px;
        margin: 0; scroll-snap-align: start;
    }
    .bb-gallery-video__photo { padding: 3px; background: #fff; border: 1px solid #d5d5d5; }
    .bb-gallery-video__photo[aria-pressed="true"] { border-color: #f47b20; }
    .bb-gallery-video__photo img { width: 100%; height: 100%; max-height: 52px; object-fit: contain; }
    .bb-gallery-video__play {
        width: 28px; height: 28px; padding: 0; font-size: 0;
        background: rgba(20, 20, 20, .72); border: 1px solid rgba(255, 255, 255, .92);
        box-shadow: 0 1px 4px rgba(0, 0, 0, .24);
    }
    .bb-gallery-video__play::after {
        content: ''; position: absolute; left: 50%; top: 50%;
        width: 0; height: 0; transform: translate(calc(-50% + 1px), -50%);
        border-top: 5px solid transparent; border-bottom: 5px solid transparent;
        border-left: 8px solid #fff;
    }
}