.unspotlighed-grid-users {
    grid-template-columns: repeat(auto-fit, 72px);
    gap: 12px;
}

@container room-presence (height >= 260px) {
    .unspotlighed-grid-users {
        grid-template-columns: repeat(auto-fit, minmax(72px, 112px));
    }
}

@container room-presence (height >= 380px) {
    .unspotlighed-grid-users {
        grid-template-columns: repeat(auto-fit, minmax(112px, 174px));
    }
}

@container room-presence (height >= 1px) {
    .full-grid-users {
        grid-template-columns: repeat(auto-fit, minmax(72px, calc(100cqh - 20px)));
        gap: 12px;
    }
}

@container room-presence (height >= 260px) {
    .full-grid-users:has(:nth-child(5)) {
        grid-template-columns: repeat(auto-fit, calc((100cqh - 20px - 12px) / 2));
    }
}

@container room-presence (height >= 380px) {
    .full-grid-users:has(:nth-child(9)) {
        grid-template-columns: repeat(auto-fit, calc((100cqh - 20px - 12px - 12px) / 3));
    }
}

.spotlighted-grid-users {
    grid-template-rows: 120px;
}

.presence-layout-stage-right .spotlighted-grid-users {
    grid-template-rows: minmax(120px, 1fr);
}

@container room-presence (height >= 200px) {
    .presence-layout-stage-top .spotlighted-grid-users {
        grid-template-rows: minmax(120px, 1fr);
    }
}

@container room-presence (height >= calc((50cqw - 48px) / 0.6)) {
    .presence-layout-stage-top .spotlighted-grid-users {
        grid-template-rows: calc(50cqw - 24px);
        min-height: 0 !important;
    }
}

@container room-presence (height >= 33cqw) {
    .presence-layout-stage-right .spotlighted-grid-users {
        grid-template-rows: 33cqw;
        min-height: 0 !important;
    }
}