:where(html){
    --ui-card-background: transparent;
}

.ui-card{
    box-sizing: border-box;
    width:100%;
    background-color:var(--ui-card-background);
    position:relative;

    .sLNodeTools{
        position:absolute;
        top:-1.5rem;
    }

    h2{
        color:var(--color-text);
    }

    figure{
        display:block;
        overflow:hidden;
        width:100%;
        position:relative;
        margin:0;

        picture{
            position: absolute;
            top: 0;
            left: 0;
            display:flex;
            align-items:center;
            justify-content: center;
            bottom:0;
            right:0;


            &.empty{
                position:relative;
                padding-bottom:61%;
                background-color:rgba(255,255,255,.3);
            }
        }
        &.empty:not(:has(picture)){
            position:relative;
            padding-bottom:61%;
            background-color:rgba(255,255,255,.3);
        }
        picture>img,
        video{
            position: absolute;
            display:block;
            width:100%;
            height:auto;
        }
    }

    .ui-card-text{
        padding:1.5rem;
    }
}