/* body {
    display: grid;
    min-height: 100vh;
    place-content: center;
    overflow: hidden;
} */

.orbit {
    .center-image {
        width: 20rem;
        position: relative;
        opacity: 0;

        img {
            position: absolute;
        }
    }

    ul {
        
        display: grid;
        place-items: center;
        width: 200px;
        height: 200px;
        background-color: orange;
        border-radius: 50%;
        position: relative;
        list-style: none;
        transform-origin: center;
        animation: orbit 100s linear infinite;
    }

    li {
        position: absolute;
        /* animation: hold-position 5s linear infinite; */
        display: grid;
        place-items: center;
        
        & > * {
            position: absolute;
            animation: hold-position 100s linear infinite;
        }
    }

    li:nth-child(1) {
        transform: translate(-120px, -150px);
        
    }
    li:nth-child(2) {
        transform: translate(120px, 150px);
        
    }
    li:nth-child(3) {
        transform: translate(-120px, 150px);
        
    }
    li:nth-child(4) {
        transform: translate(120px, -150px);
    }
}

li img {
    width: 26rem;
}

@keyframes orbit {
    100%{
        rotate: 1turn;
    }
}

@keyframes hold-position {
    100%{
        rotate: -1turn;
    }
}