/****** VARS ******/

:root {
    --object-border: 0.25em;
    --object-border-x2: 0.5em;
    --object-border-color: rgb(0, 64, 255);
    --label-padding: 0.25em;
}

/****** FACE GENERAL ELEMENTS ******/

.face-desk html {
    overflow-x: hidden;
    overflow-y: hidden;
}

.face-desk {
    width: 100%;
    height: 100%;
    /* overflow-x: hidden;
    overflow-y: hidden;*/
}

/****** FACE SPECIFIC ELEMENTS ******/

.face-desk .object-container {
    position: relative;
    width: auto;
    height: 0;
    background-color: transparent;
    /* width: fit-content; */
}

.face-desk .label-container {
    display: block;
    pointer-events: none;
}

.face-desk .label {
    display: inline-block;
    width: auto;
    opacity: 0;
    background-color: var(--object-border-color);
    color: white;
    padding: var(--label-padding);
}

.face-desk [class^="object"] {
    border: solid var(--object-border) transparent;
}

.face-desk img.object {
    vertical-align: middle;
    max-width: calc(100% - var(--object-border-x2));
    height: auto;
}

.face-desk img.object-fit {
    vertical-align: middle;
    max-height: calc(100% - var(--object-border-x2));
    width: auto;
}

.face-desk .object-container:hover .label {
    opacity: 1;
}

.face-desk .object-container:hover img[class^="object"] {
    border: solid var(--object-border) var(--object-border-color);
}