.rewind-card__wrapper {
  width: 150px;
  height: 175px;
  perspective: 1000px;
  will-change: transform;
  transform-style: preserve-3d;
  border-radius: 0.25vw;
  cursor: pointer;
  animation-name: ambientMovement;
  animation-duration: 4000ms;
  animation-delay: calc(-4000ms * var(--rand));
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  transform: rotateZ(calc(var(--ambientAmount) * 10deg));
  z-index: 1;
  .rewind-card {
    box-shadow: 0 0 0 4px var(--mystery-color);
    border: none;
  }
  .rewind-card__inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transform-style: preserve-3d;
    transition: transform;
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0.73, 0.42, 0.03, 0.78);
  }
  &.flipped .rewind-card__inner {
    transform: rotateY(180deg);
  }
  &:hover {
    animation: flip-zoom 0.5s cubic-bezier(0.73, 0.42, 0.03, 0.78) 0s forwards;
    z-index: 999;
  }
  .rewind-card.-back {
    transform: rotateY(180deg);
    background-color: var(--secondary);
    border: 1px solid var(--primary-100);
  }
  .rewind-card.-front,
  .rewind-card.-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }
  .rewind-card.-front {
    padding: 0.5em;
    display: grid;
    grid-template:
      "tl .  . " 1fr
      ".  .  . " 1fr
      ".  cr . " 3fr
      ".  .  . " 1fr
      ".  .  br" 1fr
      / 1fr 3fr 1fr;
  }
  .rewind-card__image.tl {
    grid-area: tl;
    img {
      width: 20px;
      height: 20px;
    }
  }
  .rewind-card__image.cr {
    grid-area: cr;
    img {
      width: 50px;
      height: 50px;
    }
  }
  .rewind-card__image.br {
    grid-area: br;
    img {
      width: 20px;
      height: 20px;
      transform: rotate(180deg);
    }
  }
}

@keyframes flip-zoom {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1.25);
  }
}

@keyframes ambientMovement {
  0% {
    --ambientAmount: 0.1;
  }
  50% {
    --ambientAmount: -0.1;
  }
  100% {
    --ambientAmount: 0.1;
  }
}

@property --ambientAmount {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.1;
}
