
Media
{
    gap: 8px;
    flex-direction: column;
    flex-shrink: 0;
    flex-grow: 0;
    align-items: center;
    overflow: hidden;
    width: 100%;
    padding: 16px;
}

Media > .main
{
    flex-grow: 0;
    flex-shrink: 0;
    width: 100%;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    aspect-ratio: 16/9;
    padding: 1rem;

    img, VideoPanel
    {
        flex-shrink: 1;
        max-width: 100%;
        max-height: 100%;
        border-radius: 8px;
    }

    .missing
    {
        flex-grow: 1;
        height: 100%;
        border-radius: 32px;
        background-color: rgba(white, 0.01);
        justify-content: center;
        align-items: center;
        color: rgba(white, 0.6);

        i
        {
            font-size: 72px;
        }
    }
}

    Media > .list
    {
        overflow-x: scroll;
        overflow-y: hidden;
        gap: 16px;
        padding: 0 1rem;
        height: 50px;
        justify-content: flex-start;
        max-width: 100%;

        > .screenshot
        {
            height: 100%;
            aspect-ratio: 16/9;
            flex-shrink: 0;
            cursor: pointer;
            border-radius: 6px;
            overflow: hidden;
            position: relative;
            opacity: 0.5;

            i
            {
                position: absolute;
                top: 0px;
                left: 0px;
                bottom: 0px;
                right: 0px;
                justify-content: center;
                align-items: center;
                text-align: center;
                font-size: 52px;
                pointer-events: none;
            }

            &:hover
            {
                opacity: 0.9;
                sound-in: ui.button.over;
            }

            &.selected
            {
                border: 2px solid #3472e6;
                opacity: 1;
            }
        }
    }

.skeleton
{
    background-color: #333;
    border-radius: 32px;
    animation: skeleton 1.5s infinite linear;
    animation-direction: alternate;
    background-color: pink;
    width: 100%;
    height: 100%;
}

@keyframes skeleton
{
    0%
    {
        background-color: rgba(#333, 0.2);
    }
    100%
    {
        background-color: rgba(#444, 0.2);
    }
}