/* Orbit End */
.orbit-container {
    display: grid;
    place-content: center;
    position: relative;
    min-width: 320px;
    min-height: 416px;
}
.orbit {
    --size: 192px;
    --speed: 120s;
    position: relative;
    z-index: 3;
}
.orbit .center-image {
    --size: 192px;
    width: var(--size);
    z-index: 10;
}
.orbit .center-image img {
    --center-img-size: 90px;
    width: var(--center-img-size);
    background-color: #fff;
    padding: 16px;
    border-radius: 50%;
    position: absolute;
    transition: opacity 500ms;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0px 0px 5px #ddd);
}
.orbit ul {
    display: grid;
    place-items: center;
    width: var(--size);
    height: var(--size);
    position: relative;
    list-style: none;
    border: 2px dashed #78acff;
    border-radius: 50%;
    margin: 0;
    --icon-bg: var(--green-light);
    --text-bg: var(--green-dark);
    transform-origin: center;
    animation: orbit var(--speed) linear infinite;
}
.orbit li {
    --icon-bg: pink;
    --text-bg: blue;
    --inner-img-size: 36px;
    position: absolute;
    width: 64px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    font-weight: 500;
    color: var(--white-light);
    text-align: center;
    line-height: 1;
    display: grid;
    place-items: center;
}
.orbit li:nth-child(1) {
    --throb-delay: 0ms;
}
.orbit li:nth-child(2) {
    --throb-delay: 500ms;
}
.orbit li:nth-child(3) {
    --throb-delay: 1000ms;
}
.orbit li:nth-child(4) {
    --throb-delay: 1500ms;
}
.orbit li:nth-child(5) {
    --throb-delay: 2000ms;
}
.orbit li:nth-child(6) {
    --throb-delay: 2500ms;
}
.orbit li:nth-child(7) {
    --throb-delay: 3000ms;
}
.orbit li:nth-child(8) {
    --throb-delay: 3500ms;
}
.orbit li:nth-child(9) {
    --throb-delay: 4000ms;
}
.orbit li img {
    width: var(--inner-img-size);
}
.orbit li > * {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: inherit;
    position: absolute;
    animation: orbit var(--speed) linear reverse infinite, throb 1s var(--throb-delay) ease-in-out infinite alternate;
    animation-play-state: var(--orbit-play-state, running), var(--throb-play-state, running);
}
.orbit li > p {
    background: var(--text-bg);
    transition: opacity 500ms;
    opacity: 0;
}
.orbit li:hover > p {
    opacity: 1;
}
.orbit-md,
.orbit-lg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.orbit-sm {
    --position-lg: 96px;
    --position-sm: 64px;
    --position-lg-n: -96px;
    --position-sm-n: -64px;
}
.orbit-sm li:nth-child(1) {
    transform: translate(88px, -32px);
}
.orbit-sm li:nth-child(2) {
    transform: translate(0, -96px);
}
.orbit-sm li:nth-child(5) {
    transform: translate(48px, 80px);
}
.orbit-sm li:nth-child(4) {
    transform: translate(-64px, 64px);
}
.orbit-sm li:nth-child(3) {
    transform: translate(-88px, -32px);
}
.orbit-md {
    --size: 272px;
    z-index: 2;
}
.orbit-md ul {
    animation: orbit-reverse var(--speed) linear infinite;
}
.orbit-md li {
    --position-lg: 136px;
    --position-sm: -94px;
}
.orbit-md li > * {
    animation: orbit var(--speed) linear infinite;
}
.orbit-md li:nth-child(1) {
    transform: translate(var(--position-lg), 0rem);
}
.orbit-md li:nth-child(2) {
    transform: translate(0, var(--position-lg));
}
.orbit-md li:nth-child(3) {
    transform: translate(-118px, 64px);
}
.orbit-md li:nth-child(4) {
    transform: translate(-48px, -128px);
}
.orbit-lg {
    --size: 354px;
    --speed: 100s;
    z-index: 1;
}
.orbit-lg li {
    --position-lg: 160px;
    --position-sm: -112px;
}
.orbit-lg li:nth-child(1) {
    transform: translate(var(--position-lg), -80px);
}
.orbit-lg li:nth-child(2) {
    transform: translate(4rem, var(--position-lg));
}
.orbit-lg li:nth-child(3) {
    transform: translate(-112px, 128px);
}
.orbit-lg li:nth-child(4) {
    transform: translate(-176px, 0rem);
}
.orbit-lg li:nth-child(5) {
    transform: translate(0rem, -176px);
}
.orbit-tooltip {
    width: var(--inner-img-size);
    height: var(--inner-img-size);
    border-radius: 50%;
    background-color: #e1e8f0;
    border: 2px dashed #78acff;
}

@keyframes orbit {
    100% {
        rotate: 1turn;
    }
}
@keyframes orbit-reverse {
    100% {
        rotate: -1turn;
    }
}
@media screen and (min-width: 768px) {
    .orbit-container {
        min-height: 512px;
    }
    .orbit-container .center-image img {
        --center-img-size: 100px;
    }
    .orbit-container li img {
        --inner-img-size: 40px;
    }
    .orbit-md {
        --size: 320px;
    }
    .orbit-md li {
        --position-lg: 156px;
        --position-sm: -112px;
    }
    .orbit-md li:nth-child(3) {
        transform: translate(0, var(--position-lg));
    }
    .orbit-md li:nth-child(4) {
        transform: translate(-144px, -64px);
    }
    .orbit-md li:nth-child(2) {
        transform: translate(32px, -160px);
    }
    .orbit-lg {
        --size: 448px;
    }
    .orbit-lg li {
        --position-lg: 160px;
        --position-sm: -122px;
    }
    .orbit-lg li:nth-child(1) {
        transform: translate(216px, -48px);
    }
    .orbit-lg li:nth-child(4) {
        transform: translate(64px, 212px);
    }
    .orbit-lg li:nth-child(5) {
        transform: translate(-182px, 128px);
    }
    .orbit-lg li:nth-child(2) {
        transform: translate(-208px, -80px);
    }
    .orbit-lg li:nth-child(3) {
        transform: translate(0px, -224px);
    }
}
/* Orbit End */