:root {
  --wii: 500px;
}

.cronixie_playground{
  display: block;
  width:var(--wii);
  margin: 0 auto ; background: transparent;
}
.cronixie_body[data-orientation="landscape"]{width:var(--wii);height: calc(var(--wii) * 0.24); display: flex; overflow: hidden;}
.cronixie_body[data-orientation="landscape"] .nixie{
  /*width:calc(100% / 6);*/ display: table-cell;
  background-size: var(--wii) calc(var(--wii) * 0.6625);
  height: calc(var(--wii) * 0.44);
  /*margin-top: calc((100vh - 55vw) / 2);*/
  margin-top: calc(var(--wii) * -0.16);
}

.cronixie_body[data-orientation="landscape"] .nixie0{width:calc(var(--wii) * 0.185);background-position: 0 0;}
.cronixie_body[data-orientation="landscape"] .nixie1{width:calc(var(--wii) * 0.149);background-position: calc(var(--wii) * -0.185) 0;}
.cronixie_body[data-orientation="landscape"] .nixie2{width:calc(var(--wii) * 0.156);background-position: calc(var(--wii) * -0.339) 0;}
.cronixie_body[data-orientation="landscape"] .nixie3{width:calc(var(--wii) * 0.16);background-position: calc(var(--wii) * -0.495) 0;}
.cronixie_body[data-orientation="landscape"] .nixie4{width:calc(var(--wii) * 0.164);background-position: calc(var(--wii) * -0.656) 0;}
.cronixie_body[data-orientation="landscape"] .nixie5{width:calc(var(--wii) * 0.180);background-position: calc(var(--wii) * -0.82) 0;}

.cronixie_body[data-orientation="portrait"]{
  display: flex;
  flex-wrap: wrap;
  width:var(--wii);
  /*background: red;*/
}
.cronixie_body[data-orientation="portrait"] .nixie{
  width: calc(var(--wii) * 0.5);
  height: calc(var(--wii) * 0.5 * 1.3);
  background-size: calc(var(--wii) * 3) auto;
  background-position-y: calc(var(--wii) * -0.5);
  background-position-x: calc(var(--wii) * -1);
}

.cronixie_body[data-orientation="portrait"] .nixie:nth-child(2n){
  background-position-x: calc(var(--wii) * 1.5);
}

.cronixie_body[data-ver="1"] .nixie[data-d="0"]{background-image: url(../img/0.JPG);}
.cronixie_body[data-ver="1"] .nixie[data-d="1"]{background-image: url(../img/1.JPG);}
.cronixie_body[data-ver="1"] .nixie[data-d="2"]{background-image: url(../img/2_.JPG);}
.cronixie_body[data-ver="1"] .nixie[data-d="3"]{background-image: url(../img/3_.JPG);}
.cronixie_body[data-ver="1"] .nixie[data-d="4"]{background-image: url(../img/4.JPG);}
.cronixie_body[data-ver="1"] .nixie[data-d="5"]{background-image: url(../img/5.JPG);}
.cronixie_body[data-ver="1"] .nixie[data-d="6"]{background-image: url(../img/6_.JPG);}
.cronixie_body[data-ver="1"] .nixie[data-d="7"]{background-image: url(../img/7_.JPG);}
.cronixie_body[data-ver="1"] .nixie[data-d="8"]{background-image: url(../img/8.JPG);}
.cronixie_body[data-ver="1"] .nixie[data-d="9"]{background-image: url(../img/9.JPG);}

.cronixie_body[data-ver="2"] .nixie[data-d="0"]{background-image: url(../img/2/0.JPG);}
.cronixie_body[data-ver="2"] .nixie[data-d="1"]{background-image: url(../img/2/1.JPG);}
.cronixie_body[data-ver="2"] .nixie[data-d="2"]{background-image: url(../img/2/2.JPG);}
.cronixie_body[data-ver="2"] .nixie[data-d="3"]{background-image: url(../img/2/3.JPG);}
.cronixie_body[data-ver="2"] .nixie[data-d="4"]{background-image: url(../img/2/4.JPG);}
.cronixie_body[data-ver="2"] .nixie[data-d="5"]{background-image: url(../img/2/5.JPG);}
.cronixie_body[data-ver="2"] .nixie[data-d="6"]{background-image: url(../img/2/6.JPG);}
.cronixie_body[data-ver="2"] .nixie[data-d="7"]{background-image: url(../img/2/7.JPG);}
.cronixie_body[data-ver="2"] .nixie[data-d="8"]{background-image: url(../img/2/8.JPG);}
.cronixie_body[data-ver="2"] .nixie[data-d="9"]{background-image: url(../img/2/9.JPG);}