.mgl-item .semv-container { position: relative; }
.mgl-item .semv-container > button.semv-cover {
    appearance: none !important;
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px !important;
    border: 0 !important;
    border-radius: inherit !important;
    overflow: hidden !important;
    box-shadow: none !important;
    transform: none !important;
    background-color: transparent !important;
    cursor: pointer !important;
    z-index: 2;
    box-sizing: border-box !important;
    opacity: 1 !important;
    transition: none !important;
}
.mgl-item .semv-container > button.semv-with-poster { background-color: #111 !important; }
.mgl-item .semv-container > button.semv-cover[hidden] { display: none !important; }
.mgl-item .semv-container > button.semv-cover:focus-visible { outline: 3px solid #fff !important; outline-offset: -5px; }
.mgl-item .semv-container > button.semv-cover::before,
.mgl-item .semv-container > button.semv-cover::after { content: none !important; }
.mgl-item .semv-cover .semv-poster-image {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
    background-position: center;
    background-repeat: no-repeat;
}
.mgl-item .semv-cover .semv-poster-image {
    background-size: cover;
    z-index: 1;
}
.mgl-item .semv-cover .semv-play {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--semv-size, 60px);
    height: var(--semv-size, 60px);
    border-radius: 50%;
    background: var(--semv-bg, rgba(23,23,23,.7));
    box-shadow: 0 2px 12px #0003;
    position: relative;
    z-index: 2;
}
.mgl-item .semv-cover .semv-play::after {
    content: '';
    width: 0;
    height: 0;
    border-top: calc(var(--semv-size, 60px) * .15) solid transparent;
    border-bottom: calc(var(--semv-size, 60px) * .15) solid transparent;
    border-left: calc(var(--semv-size, 60px) * .23) solid var(--semv-color, #fff);
    margin-left: calc(var(--semv-size, 60px) * .06);
}
.mgl-item .semv-container > .semv-top-left { align-items: flex-start !important; justify-content: flex-start !important; }
.mgl-item .semv-container > .semv-top-right { align-items: flex-start !important; justify-content: flex-end !important; }
.mgl-item .semv-container > .semv-bottom-left { align-items: flex-end !important; justify-content: flex-start !important; }
.mgl-item .semv-container > .semv-bottom-right { align-items: flex-end !important; justify-content: flex-end !important; }

/*
 * Meow applies object-fit: cover to every gallery video. Browsers keep that
 * declaration when the native player enters fullscreen, which crops portrait
 * and other non-16:9 videos. Override it only in native fullscreen: the
 * masonry layout stays untouched, while the complete video remains visible.
 */
.mgl-item video:fullscreen,
video[data-semv]:fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    object-fit: contain !important;
    background: #000 !important;
}

.mgl-item video:-webkit-full-screen,
video[data-semv]:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    object-fit: contain !important;
    background: #000 !important;
}
