<section class="main">
        <div class="main__content">
            <i>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </i>
            <i>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </i>
            <i>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </i>
            <i>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </i>
            <i>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </i>
            <i>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </i>
            <i>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </i>
            <i>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </i>
            <i>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </i>
            <i>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </i>
            <i>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </i>
            <i>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </i>
            <i>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </i>
            <i>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </i>
            <i>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </i>
            <i>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </i>
            <i>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </i>
            <i>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </i>
            <i>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </i>
            <i>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </i>
            <i>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </i>
            <i>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </i>
            <i>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </i>
            <i>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </i>
            <i>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </i>
        </div>
    </section>

// Global Styles

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

// Main Styles

.main {
    width: 100%;
    height: 100%;
    background: #161616;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    &__content {
        min-width: 1080px;
        height: 1080px;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows  : repeat(5, 1fr);
        transform: rotate(45deg);       
        
        i {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            
            @for $i from 1 through 8 {
                :nth-child(#{$i}) {
                    width: $i*8%;
                    height: $i*8%;
                    animation-delay: $i*-.25s;
                    background: #161616;
                    box-shadow: 4px 4px 24px rgba($color:#000, $alpha:1);
                    z-index: -(#{$i});
                }
            }
            li {
                list-style: none;
                position: absolute;
                width: 50%;
                height: 50%;
                border: 1px solid slateblue;
                animation: li-animation 4s ease-in-out forwards infinite;
                
                @keyframes li-animation {
                    0%, 100% {
                        transform: scale(1.125) rotate(0deg);
                    }

                    50% {
                        transform: scale(3) rotate(45deg);
                    }
                }
            }
        }
    }
}