:root {
  --cursorX: 0;
  --cursorY: 0;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

.container {
  height: 100%;
  width: 90%;

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.flip-card-wrapper {
  height: 150px;
  width: 150px;
  perspective: 1000px;
}

.flip-card {
  position: relative;
  height: 100%;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s ease-in;
}

.flip-card-front,
.flip-card-back {
  height: 100%;
  width: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateX(0deg);
}

.flip-card-back {
  transform: rotateY(180deg);
}

.flip-card.pakyu {
  transform: rotateY(180deg);
}

img#pakyu {
  width: 150px;
  height: 150px;
  border-radius: 5px;
}

.tilting-card-wrapper {
  display: inline-grid;
  position: relative;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  aspect-ratio: 1 / 1;
}

.mouse-position-tracker {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.tilting-card-content {
  --perspective: 500px;
  --rotateX: 0;
  --rotateY: 0;
  --angle: 10deg;

  grid-column: 1 / -1;
  grid-row: 1 / -1;
  transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(var(--rotateY));
  transition: transform 350ms ease;
}

img#art {
  height: 150px;
  width: 150px;

  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,
    rgba(0, 0, 0, 0.22) 0px 15px 12px;
  border-radius: 5px;
  filter: sepia(0.5);
  object-fit: cover;
}

#inverted-cursor {
  display: none;
  background: transparent;
  border-radius: 50%;
  height: 65px;
  width: 65px;

  position: absolute;
  top: var(--cursorY, 0);
  left: var(--cursorX, 0);
  z-index: 1;

  transform: translate(-50%, -50%);
  transition: transform 0.5s ease;
  mix-blend-mode: difference;
}

@media only screen and (min-width: 961px) {
  .container {
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
  }

  .flip-card-wrapper {
    width: 350px;
    height: 350px;
  }

  img#pakyu {
    width: 350px;
    height: 350px;
  }

  img#art {
    width: 350px;
    height: 350px;
  }

  #inverted-cursor {
    width: 100px;
    height: 100px;
  }
}

.tilting-card-wrapper {
  &:hover {
    cursor: none;
  }

  &:hover~#inverted-cursor {
    display: block;
    background: #fff;
  }

  .mouse-position-tracker:nth-of-type(3n - 2) {
    grid-column: 1 / 2;
  }

  .mouse-position-tracker:nth-of-type(3n - 1) {
    grid-column: 2 / 3;
  }

  .mouse-position-tracker:nth-of-type(3n) {
    grid-column: 3 / 4;
  }

  .mouse-position-tracker:nth-child(n + 1):nth-child(-n + 3) {
    grid-row: 1 / 2;
  }

  .mouse-position-tracker:nth-child(n + 4):nth-child(-n + 6) {
    grid-row: 2 / 3;
  }

  .mouse-position-tracker:nth-child(n + 7):nth-child(-n + 9) {
    grid-row: 3 / 4;
  }

  .mouse-position-tracker:nth-child(1):hover~.tilting-card-content {
    --rotateX: var(--angle);
    --rotateY: calc(var(--angle) * -1);
  }

  .mouse-position-tracker:nth-child(2):hover~.tilting-card-content {
    --rotateX: var(--angle);
  }

  .mouse-position-tracker:nth-child(3):hover~.tilting-card-content {
    --rotateX: var(--angle);
    --rotateY: var(--angle);
  }

  .mouse-position-tracker:nth-child(4):hover~.tilting-card-content {
    --rotateY: calc(var(--angle) * -1);
  }

  .mouse-position-tracker:nth-child(6):hover~.tilting-card-content {
    --rotateY: var(--angle);
  }

  .mouse-position-tracker:nth-child(7):hover~.tilting-card-content {
    --rotateX: calc(var(--angle) * -1);
    --rotateY: calc(var(--angle) * -1);
  }

  .mouse-position-tracker:nth-child(8):hover~.tilting-card-content {
    --rotateX: calc(var(--angle) * -1);
  }

  .mouse-position-tracker:nth-child(9):hover~.tilting-card-content {
    --rotateX: calc(var(--angle) * -1);
    --rotateY: var(--angle);
  }
}