.edu-innovation{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
@property --angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
.circuit{
    width: 100%;
    max-width: 60rem;
    aspect-ratio: 8 / 4;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    /* --angle: 0deg; */
    /* --running-state: running;
    animation: running linear 40s infinite;
    animation-play-state: running; */
    /* animation: running linear 40s infinite var(--running-state); */
    /* &:has(.circuit-item:is(:hover)) {
        --running-state: paused;
    } */
}
/* .circuit:has(.circuit-item:hover){
    --running-state: paused;
} */
/* .circuit:hover{
    --running-state: paused;
} */
.circuit-center{
    width: 20%;
    z-index: 100;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.circuit-item{
    width: 36%;
    cursor: pointer;
    position: absolute;
    /* --this-angle: calc(var(--angle) + var(--item) * 360deg / var(--items));
    left: calc(50% + 32% * sin(var(--this-angle)));
    top: calc(50% + 30% * cos(var(--this-angle))); */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* z-index: calc(100 + 50 * cos(var(--this-angle))); */
}
/* @keyframes running {
    from {
        --angle: 0deg;
    }
    to {
        --angle: 360deg;
    }
} */