body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: var(--bg);

  position: relative;
  left: 150px;
}

.container {
  display: flex;
  gap: 10px;
}

.card {
  width: 240px;
  height: 320px;
  background: var(--card);
  border-radius: 5px;
  box-shadow: rgba(10, 10, 10, 0.5) 0 10px 20px;
  transition: 300ms ease-in-out;
  padding: 20px;
}

.card + .card {
  margin-left: -10%;
}

.card:hover {
  transform: rotate(-5deg);
  /*scale: 2;*/
}

.card:hover ~ .card {
  z-index: 1;
  translate: 80px;
}