.cameraGrid{
    padding-top: 18px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:18px;
}

.cameraCard {
    display: block !important;
}

.cameraView{
    background:#0f1114;
    border:2px solid #30353d;
    border-radius:12px;
    overflow:hidden;
}

.cameraHeader{
    display:flex;
    justify-content:space-between;
    padding:10px 14px;
    font-size:.85rem;
    color:#d9d9d9;
    background:#1b1f24;
}

.cameraHeader .rec{
    color:#dd524d;
    font-weight:bold;
}

.cameraView canvas{
    width:100%;
    aspect-ratio:16/9;
    display:block;
    background:rgb(36, 41, 46);
}

.cameraFooter{
    padding:10px;
    text-align:center;
    color:#888;
    font-size:.8rem;
    letter-spacing:1px;
}

.cameraOffline{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    background:#24292e;
}

.cameraNoise{
    position:absolute;
    inset:0;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,.03) 0px,
            rgba(255,255,255,.03) 1px,
            transparent 2px,
            transparent 4px
        );

    animation:noise 0.15s steps(2) infinite;
}

.cameraStatus{
    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    font-family:monospace;
    text-transform:uppercase;
    text-align:center;
}

.statusTitle{
    color:#6aff9b;
    font-size:18px;
    letter-spacing:2px;
    animation:blink 1s infinite;
}

.statusSub{
    margin-top:8px;
    color:#9da7b0;
    font-size:12px;
}

@keyframes blink{
    50%{
        opacity:.25;
    }
}

@keyframes noise{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(4px);
    }
}