/* YIN BACKGROUND MOSAIC STYLES */

html.yin-background-studio-mosaic {
    background-image: none !important;
}

html.yin-background-studio-mosaic body {
    position: relative;
    min-height: 100vh;
}

.yin-background-studio-mosaic-layer {
    position: fixed;
    inset: 0;
    z-index: 0;

    display: grid;
    grid-template-columns:
        repeat(
            var(--yin-mosaic-columns, 2),
            minmax(0, 1fr)
        );

    grid-auto-rows: minmax(0, 1fr);

    overflow: hidden;
    pointer-events: none;
    user-select: none;
    contain: strict;
}

.yin-background-studio-mosaic-count-2 {
    --yin-mosaic-columns: 2;
}

.yin-background-studio-mosaic-count-3 {
    --yin-mosaic-columns: 3;
}

.yin-background-studio-mosaic-tile {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.yin-background-studio-mosaic-tile video {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
}

html.yin-background-studio-mosaic body > #page {
    position: relative;
    z-index: 1;
}

@media screen and (orientation: portrait) {
    .yin-background-studio-mosaic-layer {
        --yin-mosaic-columns: 1;
    }
}