.scene {
    gap: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    perspective: 600px;
    padding: 100px 0;

    @media only screen and (max-width: 768px) {
        gap: 50px;
    }
}

.cube {
    display: flex;
    justify-content: center;
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg);
    transition: transform 1s ease-in-out;
}

.face {
    position: absolute;
    width: 200px;
    height: 200px;
    background: white;
    border: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    font-weight: bold;
}

.dot-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 100%; height: 100%;
}
.dot {
    width: 20px; height: 20px;
    background: black;
    border-radius: 50%;
    justify-self: center;
    align-self: center;
}
.one  .dot-container { display: flex; justify-content: center; align-items: center; }
.two  .dot-container .dot:nth-child(1) { grid-column: 1; grid-row: 1; }
.two  .dot-container .dot:nth-child(2) { grid-column: 3; grid-row: 3; }
.three .dot-container .dot:nth-child(1) { grid-column: 1; grid-row: 1; }
.three .dot-container .dot:nth-child(2) { grid-column: 2; grid-row: 2; }
.three .dot-container .dot:nth-child(3) { grid-column: 3; grid-row: 3; }
.four .dot-container .dot:nth-child(1) { grid-column: 1; grid-row: 1; }
.four .dot-container .dot:nth-child(2) { grid-column: 3; grid-row: 1; }
.four .dot-container .dot:nth-child(3) { grid-column: 1; grid-row: 3; }
.four .dot-container .dot:nth-child(4) { grid-column: 3; grid-row: 3; }
.five .dot-container .dot:nth-child(1) { grid-column: 1; grid-row: 1; }
.five .dot-container .dot:nth-child(2) { grid-column: 3; grid-row: 1; }
.five .dot-container .dot:nth-child(3) { grid-column: 2; grid-row: 2; }
.five .dot-container .dot:nth-child(4) { grid-column: 1; grid-row: 3; }
.five .dot-container .dot:nth-child(5) { grid-column: 3; grid-row: 3; }
.six .dot-container .dot:nth-child(1) { grid-column: 1; grid-row: 1; }
.six .dot-container .dot:nth-child(2) { grid-column: 3; grid-row: 1; }
.six .dot-container .dot:nth-child(3) { grid-column: 1; grid-row: 2; }
.six .dot-container .dot:nth-child(4) { grid-column: 3; grid-row: 2; }
.six .dot-container .dot:nth-child(5) { grid-column: 1; grid-row: 3; }
.six .dot-container .dot:nth-child(6) { grid-column: 3; grid-row: 3; }

.front {
    transform: rotateY(0deg) translateZ(100px);
}

.back {
    transform: rotateY(180deg) translateZ(100px);
}

.right {
    transform: rotateY(90deg) translateZ(100px);
}

.left {
    transform: rotateY(-90deg) translateZ(100px);
}

.top {
    transform: rotateX(90deg) translateZ(100px);
}

.bottom {
    transform: rotateX(-90deg) translateZ(100px);
}

.d4-container {
    perspective: 20000px;
    position: relative;
    width: calc(2 * 10.417vw);
    height: calc(1.7320508076 * 10.417vw);

    .dot-container {
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        gap: 1vw;

        padding-top: 20%;
        width: 30%;
        height: 50%;

        grid-template-columns: none;
        grid-template-rows: none;

        z-index: 1;

        .dot {
            width: 2vw;
            height: 2vw;
        }
    }

    .polygon3d {
        transform-style: preserve-3d;
        position: absolute;
        width: 100%;
        height: 100%;
        transform: rotateX(0deg) rotateY(180deg);
        scale: 0.9;
    }

    .triangle {
        width: calc(2 * 10.417vw);
        height: calc(1.7320508076 * 10.417vw);
        clip-path: polygon(50% 0%, 0 100%, 100% 100%);
        position: absolute;

        display: flex;
        align-items: center;
        justify-content: center;

        background: black;
    }

    .front {
        transform: translateZ(calc(3.007vw*2)) rotateX(19.471221deg);
        transform-origin: center bottom;
    }

    .back-left {
        transform: translateX(calc(-10.417vw/2)) translateZ(-3.007vw) rotateY(60deg) rotateX(-19.471221deg);
        transform-origin: center bottom;
    }

    .back-right {
        transform: translateX(calc(10.417vw/2)) translateZ(-3.007vw) rotateY(-60deg) rotateX(-19.471221deg);
        transform-origin: center bottom;
    }

    .bottom {
        transform: translateZ(calc(3.007vw*2)) rotateX(90deg);
        transform-origin: center bottom;
    }

    .blue {
        position: absolute;
        width: 100%;
        height: 100%;

        background: rgba(0, 81, 255, 1);
        clip-path: polygon(2% 98%, 50% 0%, 98% 98%);
    }
    .green {
        position: absolute;
        width: 100%;
        height: 100%;

        background: rgba(0, 255, 106, 1);
        clip-path: polygon(2% 98%, 50% 0%, 98% 98%);
    }
    .yellow {
        position: absolute;
        width: 100%;
        height: 100%;

        background: rgba(255, 251, 0, 1);
        clip-path: polygon(2% 98%, 50% 0%, 98% 98%);
    }
    .red {
        position: absolute;
        width: 100%;
        height: 100%;

        background: rgb(255, 0, 0);
        clip-path: polygon(2% 98%, 50% 0%, 98% 98%);
    }
}