card-stack/card-stack.css
.card-stack {
  justify-self: start;
  display: grid;
  grid: [gui] 1fr / [challenges] min(50vmin, 40ch);
}

.card {
  --better-bottom-left: -25% 125%;
  --better-bottom-center: center 200%;
  --better-bottom-right: 125% 125%;
  --better-top-left: -25% -25%;
  --better-top-center: center -200%;
  --better-top-right: 125% -25%;

  grid-area: gui / challenges;
  transform: rotate(var(--r, 0deg)) translateY(var(--t, 0px));
  /* transition: 
    transform-origin .5s var(--ease-squish-4),
    translate .25s var(--ease-in-out-3),
    rotate .5s var(--ease-squish-4); */
  transition: 
    transform-origin .5s var(--ease-squish-4),
    transform .25s var(--ease-in-out-3);
}

.card:hover {
  /* translate: 0 -50px; */
  --t: -50px;
}

.card:nth-of-type(5) { --r: 0deg }
.card:nth-of-type(4) { --r: calc(var(--scalar, 5) * 1deg) }
.card:nth-of-type(3) { --r: calc(var(--scalar, 5) * 1deg * -1) }
.card:nth-of-type(2) { --r: calc(var(--scalar, 5) * 2 * 1deg) }
.card:nth-of-type(1) { --r: calc(var(--scalar, 5) * 2 * 1deg * -1) }

/*  radio states  */
html:has(#mode-bottom-left:checked) .card-stack > .card {
  transform-origin: bottom left;
}

html:has(#mode-top-left:checked) .card-stack > .card {
  transform-origin: top left;
}

html:has(#mode-top-right:checked) .card-stack > .card {
  transform-origin: top right;
}

html:has(#mode-bottom-right:checked) .card-stack > .card {
  transform-origin: bottom right;
}

html:has(#mode-bottom-center:checked) .card-stack > .card {
  transform-origin: bottom center;
}

html:has(#mode-better-bottom-center:checked) .card-stack > .card {
  transform-origin: var(--better-bottom-center);
}

html:has(#mode-better-top-left:checked) .card-stack > .card {
  transform-origin: var(--better-top-left);
}

html:has(#mode-center:checked) .card-stack > .card {
  transform-origin: center;
}

html:has(#mode-bett:checked) .card-stack > .card {
  transform-origin: var(--better-top-center);
}