:root {
  --card-w: 34px;
  --card-h: 50px;
  --card-gapw: 10px;
  --card-gaph: 10px;
  --card-gapw-sum: calc(var(--card-w) + var(--card-gapw));
  --card-gaph-sum: calc(var(--card-h) + var(--card-gaph));
}
.g-card {
  width: var(--card-w);
  height: var(--card-h);
  background: url(/assets/images/pokercard.svg);
}
.g-card.deg90 {
  transform: rotate(90deg)
}
.g-card.deg270 {
  transform: rotate(270deg)
}
.g-card.card-XX {
  background-position: calc(var(--card-gapw-sum) * -3) calc(var(--card-gaph-sum) * -4);
}
.g-card.card-AS {
  background-position: calc(var(--card-gapw-sum) * 0) calc(var(--card-gaph-sum) * 0);
}
.g-card.card-2S {
  background-position: calc(var(--card-gapw-sum) * -1) calc(var(--card-gaph-sum) * 0);
}
.g-card.card-3S {
  background-position: calc(var(--card-gapw-sum) * -2) calc(var(--card-gaph-sum) * 0);
}
.g-card.card-4S {
  background-position: calc(var(--card-gapw-sum) * -3) calc(var(--card-gaph-sum) * 0);
}
.g-card.card-5S {
  background-position: calc(var(--card-gapw-sum) * -4) calc(var(--card-gaph-sum) * 0);
}
.g-card.card-6S {
  background-position: calc(var(--card-gapw-sum) * -5) calc(var(--card-gaph-sum) * 0);
}
.g-card.card-7S {
  background-position: calc(var(--card-gapw-sum) * -6) calc(var(--card-gaph-sum) * 0);
}
.g-card.card-8S {
  background-position: calc(var(--card-gapw-sum) * -7) calc(var(--card-gaph-sum) * 0);
}
.g-card.card-9S {
  background-position: calc(var(--card-gapw-sum) * -8) calc(var(--card-gaph-sum) * 0);
}
.g-card.card-TS {
  background-position: calc(var(--card-gapw-sum) * -9) calc(var(--card-gaph-sum) * 0);
}
.g-card.card-JS {
  background-position: calc(var(--card-gapw-sum) * -10) calc(var(--card-gaph-sum) * 0);
}
.g-card.card-QS {
  background-position: calc(var(--card-gapw-sum) * -11) calc(var(--card-gaph-sum) * 0);
}
.g-card.card-KS {
  background-position: calc(var(--card-gapw-sum) * -12) calc(var(--card-gaph-sum) * 0);
}



.g-card.card-AC {
  background-position: calc(var(--card-gapw-sum) * 0) calc(var(--card-gaph-sum) * -1);
}
.g-card.card-2C {
  background-position: calc(var(--card-gapw-sum) * -1) calc(var(--card-gaph-sum) * -1);
}
.g-card.card-3C {
  background-position: calc(var(--card-gapw-sum) * -2) calc(var(--card-gaph-sum) * -1);
}
.g-card.card-4C {
  background-position: calc(var(--card-gapw-sum) * -3) calc(var(--card-gaph-sum) * -1);
}
.g-card.card-5C {
  background-position: calc(var(--card-gapw-sum) * -4) calc(var(--card-gaph-sum) * -1);
}
.g-card.card-6C {
  background-position: calc(var(--card-gapw-sum) * -5) calc(var(--card-gaph-sum) * -1);
}
.g-card.card-7C {
  background-position: calc(var(--card-gapw-sum) * -6) calc(var(--card-gaph-sum) * -1);
}
.g-card.card-8C {
  background-position: calc(var(--card-gapw-sum) * -7) calc(var(--card-gaph-sum) * -1);
}
.g-card.card-9C {
  background-position: calc(var(--card-gapw-sum) * -8) calc(var(--card-gaph-sum) * -1);
}
.g-card.card-TC {
  background-position: calc(var(--card-gapw-sum) * -9) calc(var(--card-gaph-sum) * -1);
}
.g-card.card-JC {
  background-position: calc(var(--card-gapw-sum) * -10) calc(var(--card-gaph-sum) * -1);
}
.g-card.card-QC {
  background-position: calc(var(--card-gapw-sum) * -11) calc(var(--card-gaph-sum) * -1);
}
.g-card.card-KC {
  background-position: calc(var(--card-gapw-sum) * -12) calc(var(--card-gaph-sum) * -1);
}



.g-card.card-AH {
  background-position: calc(var(--card-gapw-sum) * 0) calc(var(--card-gaph-sum) * -2);
}
.g-card.card-2H {
  background-position: calc(var(--card-gapw-sum) * -1) calc(var(--card-gaph-sum) * -2);
}
.g-card.card-3H {
  background-position: calc(var(--card-gapw-sum) * -2) calc(var(--card-gaph-sum) * -2);
}
.g-card.card-4H {
  background-position: calc(var(--card-gapw-sum) * -3) calc(var(--card-gaph-sum) * -2);
}
.g-card.card-5H {
  background-position: calc(var(--card-gapw-sum) * -4) calc(var(--card-gaph-sum) * -2);
}
.g-card.card-6H {
  background-position: calc(var(--card-gapw-sum) * -5) calc(var(--card-gaph-sum) * -2);
}
.g-card.card-7H {
  background-position: calc(var(--card-gapw-sum) * -6) calc(var(--card-gaph-sum) * -2);
}
.g-card.card-8H {
  background-position: calc(var(--card-gapw-sum) * -7) calc(var(--card-gaph-sum) * -2);
}
.g-card.card-9H {
  background-position: calc(var(--card-gapw-sum) * -8) calc(var(--card-gaph-sum) * -2);
}
.g-card.card-TH {
  background-position: calc(var(--card-gapw-sum) * -9) calc(var(--card-gaph-sum) * -2);
}
.g-card.card-JH {
  background-position: calc(var(--card-gapw-sum) * -10) calc(var(--card-gaph-sum) * -2);
}
.g-card.card-QH {
  background-position: calc(var(--card-gapw-sum) * -11) calc(var(--card-gaph-sum) * -2);
}
.g-card.card-KH {
  background-position: calc(var(--card-gapw-sum) * -12) calc(var(--card-gaph-sum) * -2);
}




.g-card.card-AD {
  background-position: calc(var(--card-gapw-sum) * 0) calc(var(--card-gaph-sum) * -3);
}
.g-card.card-2D {
  background-position: calc(var(--card-gapw-sum) * -1) calc(var(--card-gaph-sum) * -3);
}
.g-card.card-3D {
  background-position: calc(var(--card-gapw-sum) * -2) calc(var(--card-gaph-sum) * -3);
}
.g-card.card-4D {
  background-position: calc(var(--card-gapw-sum) * -3) calc(var(--card-gaph-sum) * -3);
}
.g-card.card-5D {
  background-position: calc(var(--card-gapw-sum) * -4) calc(var(--card-gaph-sum) * -3);
}
.g-card.card-6D {
  background-position: calc(var(--card-gapw-sum) * -5) calc(var(--card-gaph-sum) * -3);
}
.g-card.card-7D {
  background-position: calc(var(--card-gapw-sum) * -6) calc(var(--card-gaph-sum) * -3);
}
.g-card.card-8D {
  background-position: calc(var(--card-gapw-sum) * -7) calc(var(--card-gaph-sum) * -3);
}
.g-card.card-9D {
  background-position: calc(var(--card-gapw-sum) * -8) calc(var(--card-gaph-sum) * -3);
}
.g-card.card-TD {
  background-position: calc(var(--card-gapw-sum) * -9) calc(var(--card-gaph-sum) * -3);
}
.g-card.card-JD {
  background-position: calc(var(--card-gapw-sum) * -10) calc(var(--card-gaph-sum) * -3);
}
.g-card.card-QD {
  background-position: calc(var(--card-gapw-sum) * -11) calc(var(--card-gaph-sum) * -3);
}
.g-card.card-KD {
  background-position: calc(var(--card-gapw-sum) * -12) calc(var(--card-gaph-sum) * -3);
}