html{
  background: url(images/brown-wood-background.jpeg)
}

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

.diamond {
  --suit: url(images/diamond.svg);
  color: rgb(254, 0, 0);
}

.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: calc(var(--size)/20);
    box-shadow: 0 0 calc(var(--size)/20) rgb(1, 1, 1);
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.8s;
    transform-style: preserve-3d;

    :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: azure;

      &::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;
      }
    }

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