body {
  --size: 13vh;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  align-content: center;
  place-items: center;
  margin: 0;
  height: 100vh;
  gap: calc(var(--size) / 8);
  width: min-content;
  margin: auto;
}

.diamond {
  --suit: url(images/diamond.svg);
    color: red;

}

.heart {
  --suit: url(images/heart.svg);
  color: red;
}

.club {
  --suit: url(images/club.svg);
}

.spade {
  --suit: url(images/spade.svg);
}

.six {
  --rank: "6";
}

.seven {
  --rank: "7";
}

.eight {
  --rank: "8";
}

.nine {
  --rank: "9";
}

.ten {
  --rank: "10";
}

.jack {
  --rank: "J";
}

.queen {
  --rank: "Q";
}

.king {
  --rank: "K";
}

.ace {
  --rank: "A";
}

.card {
  width: var(--size);
  height: calc(var(--size) * 1.5);
  perspective: 1000px;
  flex-shrink: 0;
}

.inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  box-shadow: 0 0  calc(var(--size) / 20) black;
  border-radius: calc(var(--size) / 20);

  :not(:hover)>& {
    transform: rotateY(180deg);
  }
}

.front,
.back {
  border-radius: calc(var(--size) / 20);
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
}

.front {
  background-image: var(--suit);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40%;
  background-color: white;


  &::before,
  &::after {
    display: block;
    position: absolute;
    content: var(--rank);
    background-image: var(--suit);
    background-repeat: no-repeat;
    inset: 5%;
    background-size: 15%;
    background-position: 0 calc(var(--size) / 5);
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: calc(var(--size) / 6);
    padding-left: calc(var(--size) / 50);
  }

  &::after {
    rotate: 180deg;
  }
}

.back {
  background-image: url(images/back.png);
  background-size: cover;
  transform: rotateY(180deg);
}

/* .six.diamond .front  */