.D6 {
  > ol {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    list-style-type: none;
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    &[data-spin="up"] {
      transition: transform 2s ease-out;
    }
    &[data-spin="down"] {
      transition: transform 2s ease-out;
    }
    .die-face {
      background: #eee;
      box-shadow: inset 0 0 0.4em rgba(0, 0, 0, 0.4);
      border-radius: .3em;
      display: grid;
      grid-column: 1;
      grid-row: 1;
      grid-template-areas:
        "one two three"
        "four five six"
        "sup eight nine";
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      height: 100%;
      padding: .7em;
      width: 100%;
      outline: .01em solid #333;
      .dot {
        align-self: center;
        background-color: #333;
        border-radius: 50%;
        box-shadow: inset -0.12em 0.12em 0.25em rgba(255, 255, 255, 0.3);
        display: block;
        height: 1.25em;
        justify-self: center;
        width: 1.25em;
      }
      &[data-face="1"] {
        transform: rotate3d(0, 0, 0, 90deg) translateZ(3.1em);
      }
      &[data-face="2"] {
        transform: rotate3d(-1, 0, 0, 90deg) translateZ(3.1em);
      }
      &[data-face="3"] {
        transform: rotate3d(0, 1, 0, 90deg) translateZ(3.1em);
      }
      &[data-face="4"] {
        transform: rotate3d(0, -1, 0, 90deg) translateZ(3.1em);
      }
      &[data-face="5"] {
        transform: rotate3d(1, 0, 0, 90deg) translateZ(3.1em);
      }
      &[data-face="6"] {
        transform: rotate3d(0, 1, 0, 180deg) translateZ(3.1em);
      }
      &[data-face="1"] .dot:nth-of-type(1) {
        grid-area: five;
      }
      &[data-face="2"] .dot:nth-of-type(1) {
        grid-area: one;
      }
      &[data-face="2"] .dot:nth-of-type(2) {
        grid-area: nine;
      }
      &[data-face="3"] .dot:nth-of-type(1) {
        grid-area: one;
      }
      &[data-face="3"] .dot:nth-of-type(2) {
        grid-area: five;
      }
      &[data-face="3"] .dot:nth-of-type(3) {
        grid-area: nine;
      }
      &[data-face="4"] .dot:nth-of-type(1) {
        grid-area: one;
      }
      &[data-face="4"] .dot:nth-of-type(2) {
        grid-area: three;
      }
      &[data-face="4"] .dot:nth-of-type(3) {
        grid-area: sup;
      }
      &[data-face="4"] .dot:nth-of-type(4) {
        grid-area: nine;
      }
      &[data-face="5"] .dot:nth-of-type(1) {
        grid-area: one;
      }
      &[data-face="5"] .dot:nth-of-type(2) {
        grid-area: three;
      }
      &[data-face="5"] .dot:nth-of-type(3) {
        grid-area: five;
      }
      &[data-face="5"] .dot:nth-of-type(4) {
        grid-area: sup;
      }
      &[data-face="5"] .dot:nth-of-type(5) {
        grid-area: nine;
      }
      &[data-face="6"] .dot:nth-of-type(1) {
        grid-area: one;
      }
      &[data-face="6"] .dot:nth-of-type(2) {
        grid-area: three;
      }
      &[data-face="6"] .dot:nth-of-type(3) {
        grid-area: four;
      }
      &[data-face="6"] .dot:nth-of-type(4) {
        grid-area: six;
      }
      &[data-face="6"] .dot:nth-of-type(5) {
        grid-area: sup;
      }
      &[data-face="6"] .dot:nth-of-type(6) {
        grid-area: nine;
      }
    }
  }
  &[data-current="1"] [data-spin="up"] {
    transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
  }
  &[data-current="2"] [data-spin="up"] {
    transform: rotateX(450deg) rotateY(720deg) rotateZ(360deg);
  }
  &[data-current="3"] [data-spin="up"] {
    transform: rotateX(360deg) rotateY(630deg) rotateZ(360deg);
  }
  &[data-current="4"] [data-spin="up"] {
    transform: rotateX(360deg) rotateY(810deg) rotateZ(360deg);
  }
  &[data-current="5"] [data-spin="up"] {
    transform: rotateX(270deg) rotateY(720deg) rotateZ(360deg);
  }
  &[data-current="6"] [data-spin="up"] {
    transform: rotateX(360deg) rotateY(900deg) rotateZ(360deg);
  }
  &[data-current="1"] [data-spin="down"] {
    transform: rotateX(-360deg) rotateY(-720deg) rotateZ(-360deg);
  }
  &[data-current="2"] [data-spin="down"] {
    transform: rotateX(-270deg) rotateY(-720deg) rotateZ(-360deg);
  }
  &[data-current="3"] [data-spin="down"] {
    transform: rotateX(-360deg) rotateY(-810deg) rotateZ(-360deg);
  }
  &[data-current="4"] [data-spin="down"] {
    transform: rotateX(-360deg) rotateY(-630deg) rotateZ(-360deg);
  }
  &[data-current="5"] [data-spin="down"] {
    transform: rotateX(-450deg) rotateY(-720deg) rotateZ(-360deg);
  }
  &[data-current="6"] [data-spin="down"] {
    transform: rotateX(-360deg) rotateY(-900deg) rotateZ(-360deg);
  }
}
