.spacing {
  padding: 48px;
}

.card {
  height: 512px;
  width: 288px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transform-style: preserve-3d;
}

.card.flipped {
  transform: rotateY(180deg);
}

.face {
  width: 100%;
  align-self: stretch;
  transition: 400ms cubic-bezier(0.19, 1, 0.22, 1) transform;
  background: var(--theme-background);
  color: var(--theme-text);
  border-radius: 8px;
  box-shadow: 0px 0px 0px 8px var(--theme-border);
  position: relative;
  transform-style: preserve-3d;

  &:hover {
    z-index: 1;
  }

  img {
    user-select: none;
    pointer-events: none;
  }
}

.back {
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
}

.front {
  position: absolute;
  height: 100%;
  width: 100%;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  border-radius: 9px;
}