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

.presence-layout-grid .regular-grid-users,
.presence-layout-stage-right .regular-grid-users {
    grid-template-columns: repeat(auto-fit, 72px);
    gap: 12px;
}

@container room-presence (height >= 92px) {
    .presence-layout-grid .regular-grid-users,
    .presence-layout-stage-right .regular-grid-users {
        grid-template-columns: repeat(auto-fit, minmax(40px, 72px));
    }
}

@container room-presence (height >= 260px) {
    .presence-layout-grid .regular-grid-users,
    .presence-layout-stage-right .regular-grid-users {
        grid-template-columns: repeat(auto-fit, minmax(40px, 112px));
        gap: 16px;
    }
}

@container room-presence (height >= 270px) {
    .presence-layout-stage-top .regular-grid-users {
        grid-template-columns: repeat(auto-fit, minmax(40px, 72px));
    }
}

@container room-presence (height >= 650px) {
    .presence-layout-stage-top .regular-grid-users {
        grid-template-columns: repeat(auto-fit, minmax(40px, 112px));
    }
}

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