.unspotlighed-grid-users {
    grid-template-columns: repeat(auto-fit, 112px);
    gap: 12px;
}
/*
 * Tile Count Specific Rules
 * 
 * These queries set maximum tile widths for specific tile counts:
 * - 2 tiles: 522px max width at 542px height
 * - 3 tiles: 342px max width at 362px height
 * - 4 tiles: 288px max width at 308px height (also applies to 5, 6 tiles)
 * - 7 tiles: 255px max width at 275px height
 * - 8 tiles: 191px max width at 211px height (also applies to 9, 10, 11 tiles)
 * - 12+ tiles: 190px max width at 220px height
 */

@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 >= 180px) {
    .unspotlighed-grid-users {
        grid-template-columns: repeat(auto-fit, minmax(112px, 160px));
    }
}

@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 >= 542px) {
    .full-grid-users:has(:nth-child(2)) {
        grid-template-columns: repeat(auto-fit, 522px);
    }
}

@container room-presence (height >= 362px) {
    .full-grid-users:has(:nth-child(3)) {
        grid-template-columns: repeat(auto-fit, 342px);
    }
}

@container room-presence (height >= 308px) {
    .full-grid-users:has(:nth-child(4)) {
        grid-template-columns: repeat(auto-fit, 288px);
    }
}

@container room-presence (height >= 275px) {
    .full-grid-users:has(:nth-child(7)) {
        grid-template-columns: repeat(auto-fit, 255px);
    }
}

@container room-presence (height >= 211px) {
    .full-grid-users:has(:nth-child(8)) {
        grid-template-columns: repeat(auto-fit, 191px);
    }
}

@container room-presence (height >= 220px) {
    .full-grid-users:has(:nth-child(12)) {
        grid-template-columns: repeat(auto-fit, 190px);
    }
}

.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;
    }
}