swing: -25px;
      --overlap: 25px;
    }

    .lovers-card {
      grid-area: lovers;
      margin-left: -10px; /* nudge closer to happy card */

      /* these values are used to animate via translateX */
      --swing: 25px;
      --overlap: -25px;
    }

    /* when a radio button is set, swing the corresponding card fowards */
    #happy-radio:checked ~ .selector .happy-card,
    #lovers-radio:checked ~ .selector .lovers-card {
      animation-name: swing-forwards;
    }

    @keyframes swing-forwards