/** only required for group-hover - see below */
.menu-scale-0 {
    transform: scale(0);
}

.menu-scale-100 {
    transform: scale(1);
}

/** as good as I can get it atm - can't seem to get a group-hover to respect a custom class */
.nav-desktop .group:hover .group-hover\:menu-scale-100 {
    transform: scale(1); /** @apply menu-scale-100 */
}

/** everything below still needs "fixing" but think it's in the same situation as the hover above */
.page-header .nav-desktop li:hover > ul.menu-open-right {
    transform: translateX(100%) scale(1);
}

.page-header .nav-desktop li:hover > ul.menu-open-left {
    transform: scale(1); /** menu-scale-100 */
    left: -16rem; /** -left-64 */
    top: 2rem; /** top-8 */
}