.even-roll[data-roll="1"] {
    transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
}
.even-roll[data-roll="2"] {
    transform: rotateX(450deg) rotateY(720deg) rotateZ(360deg);
}
.even-roll[data-roll="3"] {
    transform: rotateX(360deg) rotateY(630deg) rotateZ(360deg);
}
.even-roll[data-roll="4"] {
    transform: rotateX(360deg) rotateY(810deg) rotateZ(360deg);
}
.even-roll[data-roll="5"] {
    transform: rotateX(270deg) rotateY(720deg) rotateZ(360deg);
}
.even-roll[data-roll="6"] {
    transform: rotateX(360deg) rotateY(900deg) rotateZ(360deg);
}
.odd-roll[data-roll="1"] {
    transform: rotateX(-360deg) rotateY(-720deg) rotateZ(-360deg);
}
.odd-roll[data-roll="2"] {
    transform: rotateX(-270deg) rotateY(-720deg) rotateZ(-360deg);
}
.odd-roll[data-roll="3"] {
    transform: rotateX(-360deg) rotateY(-810deg) rotateZ(-360deg);
}
.odd-roll[data-roll="4"] {
    transform: rotateX(-360deg) rotateY(-630deg) rotateZ(-360deg);
}
.odd-roll[data-roll="5"] {
    transform: rotateX(-450deg) rotateY(-720deg) rotateZ(-360deg);
}
.odd-roll[data-roll="6"] {
    transform: rotateX(-360deg) rotateY(-900deg) rotateZ(-360deg);
}
[data-side="1"] {
    transform: rotate3d(0, 0, 0, 90deg) translateZ(4rem);
}
[data-side="2"] {
    transform: rotate3d(-1, 0, 0, 90deg) translateZ(4rem);
}
[data-side="3"] {
    transform: rotate3d(0, 1, 0, 90deg) translateZ(4rem);
}
[data-side="4"] {
    transform: rotate3d(0, -1, 0, 90deg) translateZ(4rem);
}
[data-side="5"] {
    transform: rotate3d(1, 0, 0, 90deg) translateZ(4rem);
}
[data-side="6"] {
    transform: rotate3d(1, 0, 0, 180deg) translateZ(4rem);
}
[data-side="1"] .dot:nth-of-type(1) {
    grid-area: five;
}
[data-side="2"] .dot:nth-of-type(1) {
    grid-area: one;
}
[data-side="2"] .dot:nth-of-type(2) {
    grid-area: nine;
}
[data-side="3"] .dot:nth-of-type(1) {
    grid-area: one;
}
[data-side="3"] .dot:nth-of-type(2) {
    grid-area: five;
}
[data-side="3"] .dot:nth-of-type(3) {
    grid-area: nine;
}
[data-side="4"] .dot:nth-of-type(1) {
    grid-area: one;
}
[data-side="4"] .dot:nth-of-type(2) {
    grid-area: three;
}
[data-side="4"] .dot:nth-of-type(3) {
    grid-area: seven;
}
[data-side="4"] .dot:nth-of-type(4) {
    grid-area: nine;
}
[data-side="5"] .dot:nth-of-type(1) {
    grid-area: one;
}
[data-side="5"] .dot:nth-of-type(2) {
    grid-area: three;
}
[data-side="5"] .dot:nth-of-type(3) {
    grid-area: five;
}
[data-side="5"] .dot:nth-of-type(4) {
    grid-area: seven;
}
[data-side="5"] .dot:nth-of-type(5) {
    grid-area: nine;
}
[data-side="6"] .dot:nth-of-type(1) {
    grid-area: one;
}
[data-side="6"] .dot:nth-of-type(2) {
    grid-area: three;
}
[data-side="6"] .dot:nth-of-type(3) {
    grid-area: four;
}
[data-side="6"] .dot:nth-of-type(4) {
    grid-area: six;
}
[data-side="6"] .dot:nth-of-type(5) {
    grid-area: seven;
}
[data-side="6"] .dot:nth-of-type(6) {
    grid-area: nine;
}