.octahedron-wrap {
    height: 100%;
    width: 80px;
    background: #222222;
    box-shadow: 0 0 10px var(--glow-color);
    clip-path: polygon(0 0, 40% 0, 100% 100%, 0 100%);
    display: flex;
    align-items: end;
    justify-content: center;
    position: relative;
    min-width: 80px;
    z-index: 1;
}

.octahedron-frame {
    perspective: 200px;
    transform: translateY(-20px);
}

.octahedron {
    position: relative;
    width: 40px;
    height: 40px;
    transform-style: preserve-3d;
    animation: rotateOctahedron 5s infinite linear;
}

.face {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: #ffffff transparent transparent transparent;
}

.face1 {
    transform: rotateX(90deg) translateZ(20px);
}
.face2 {
    transform: rotateX(-90deg) translateZ(20px);
}
.face3 {
    transform: rotateY(90deg) translateZ(20px);
}
.face4 {
    transform: rotateY(-90deg) translateZ(20px);
}
.face5 {
    transform: rotateX(45deg) translateZ(20px);
}
.face6 {
    transform: rotateX(-45deg) translateZ(20px);
}
.face7 {
    transform: rotateY(45deg) translateZ(20px);
}
.face8 {
    transform: rotateY(-45deg) translateZ(20px);
}

@keyframes rotateOctahedron {
    from {
        transform: rotateX(0) rotateY(0);
    }
    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}
@media screen and (max-width: 991px) {
    .octahedron-wrap {
        height: auto;
    }
}