/*-----------------------------------------------------------------------------------------------*/
@media all {
/*-----------------------------------------------------------------------------------------------*/
    /* --------------------------------------------------------------- */
    .webcams {
    /* --------------------------------------------------------------- */
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); /* app.js:listAd */
    }
        /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
        .webcams a,
        .webcams > .loading {
        /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
            display: inline-block;
            max-width: 400px;
            overflow: hidden;
            
            border-radius: var(--border-radius);
            outline: .25em solid transparent;
            transition: var(--transition);
        }
            /*- - - - - - - - - - - - - - - - - - */
            .webcams a.active,
            .webcams a:active,
            .webcams a:focus-visible {
            /*- - - - - - - - - - - - - - - - - - */
                background: var(--color-bg-active);
                outline-color: var(--color-bg-active);
            }

            /*- - - - - - - - - - - - - - - - - - */
            .webcams a.active {
            /*- - - - - - - - - - - - - - - - - - */
                /* height: fit-content; */
                /* transform: scale(.9); */
            }
            /*- - - - - - - - - - - - - - - - - - */
            .webcams a.active img {
            /*- - - - - - - - - - - - - - - - - - */
                /* opacity: .1; */
            }
            /*- - - - - - - - - - - - - - - - - - */
            .webcams a.active div {
            /*- - - - - - - - - - - - - - - - - - */
                /* display: none; */
            }
            /*- - - - - - - - - - - - - - - - - - */
            .webcams a img,
            .webcams > .loading {
            /*- - - - - - - - - - - - - - - - - - */
                aspect-ratio: 16/9;
                width: 100%;

                border-radius: var(--border-radius);
                filter: brightness(1) contrast(1.1) saturate(1.5);
                transition: var(--transition);
            }
            /*- - - - - - - - - - - - - - - - - - */
            .webcams a div {
            /*- - - - - - - - - - - - - - - - - - */
                /* font-size: var(--font-size-small); */
                font-weight: normal;
                margin: 0;
                margin-top: .25em;
                position: relative;
                text-align: center;
                top: 0;
                transition: all linear .1s;

                color: var(--color-text-lighter);
            }    
}       
/*-----------------------------------------------------------------------------------------------*/
@media (hover: hover) and (pointer: fine) {
/*-----------------------------------------------------------------------------------------------*/
    /* --------------------------------------------------------------- */
    .webcams a.active,
    .webcams a:hover {
    /* --------------------------------------------------------------- */
        div {
        /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
            top: -.25em;
        }
        /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
        img {
        /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
            filter: brightness(1.5);
            transform: scale(.975);
        }
    }
    /* --------------------------------------------------------------- */
    .webcams a:hover div {
    /* --------------------------------------------------------------- */
        color: var(--color-text);
    }
}