@layer components {
    .screen-grid {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 20px;

        .frame {
            aspect-ratio: 16/9;
            background-color: var(--ui-100);
            border-radius: 7px;
            border: 1px solid var(--ui-150);
            position: relative;

            img {
                height: 100%;
                position: absolute;
                transform: translate(-50%,-50%) scale(102%);
                top:50%;
                left:50%;
                border-radius: 3px;
                box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.25);
                transition: all ease 0.15s;

                &.portrait {
                    transform: translate(-50%,-50%) scale(110%);
                }
                &:hover {
                    transform: translate(-50%,-50%) scale(115%);
                }
                &.portrait:hover {
                    transform: translate(-50%,-50%) scale(120%);
                }

            }

        }
        .details {
            margin-top: 7px;
        }
    }

    .color-circle {
        --status-color: var(--green-400);
        width:10px;
        height: 10px;
        border-radius: 10px;
        background: var(--status-color);
        display: inline-flex;

        &.red {
            --status-color: var(--red-400);
        }
        &.yellow {
            --status-color: var(--amber-400);
        }
    }
}