body {
  --size: 14vh;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  place-items: center;
  align-content: center;
  height: 100vh;
  margin: 0;
  gap: calc(var(--size) / 7);
  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 {
    border-radius: calс(var(--size) / 20);
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
    box-shadow: 0 0 calc(var(--size) / 20) black;


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


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

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


      &::before,
      &::after {
        position: absolute;
        content: var(--rank);
        background-image: var(--suit);
        background-repeat: no-repeat;
        background-size: 15%;
        background-position: 0 calc(var(--size) / 5);
        display: block;
        inset: 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;
        /* background-position: right 0 top 10vh;
    right: 5%;
    bottom: 5%;
    top: auto;
    left: auto; */
      }
    }

    .back {
      background-image: url(images/back-card.jpg);
      background-size: cover;
      top: 0;
      left: 0;
      transform: rotateY(180deg);
    }
  }
}