.hero {
    display: grid;
    place-items: center;
}

.wheel {
    position: relative;
    width: min(var(--wheel-size), 92vw);
    aspect-ratio: 1 / 1;
    overflow: visible;
    font-size: var(--font-size-text);
    background-image: url("/images/backgrounds/home_speaker.png");
    background-size: 100% 100%;
    background-position: 0%;
}

.face {
    position: absolute;
}

.wheel-item {
    position: absolute;
    left: 50%;
    top: 50%;
    transform:
    translate(-50%, -50%)
    rotate(calc(var(--i) * (360deg / var(--n))))
    translateX(calc((min(var(--wheel-size), 92vw) / 2) - var(--wheel-menu-items-distance)))
    rotate(calc(var(--i) * (-360deg / var(--n))));
    transform-origin: center;
}