.rulecards { display: grid; gap: 12px; margin-top: 18px; }
.rulecards li {
  display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 16px 14px 16px 16px;
  background: #FBF8EE var(--tex-bond) 0 0 / 512px; border: 1px solid var(--bond-shade); border-top: 3px solid var(--stamp);
  box-shadow: 0 1px 0 rgb(29 28 26 / .06), 0 4px 8px -4px rgb(29 28 26 / .25);
}
.rulecards li:nth-child(odd) { rotate: -.5deg; }
.rulecards li:nth-child(even) { rotate: .4deg; margin-left: 6px; }
.rulecards .num { font: 700 34px/1 var(--font-typed); color: var(--stamp); }
.rulecards p { font-weight: 700; font-size: 18px; line-height: 27px; }
.slips { display: grid; gap: 14px; }
.slip-q { padding: 12px 14px 14px; background: #FBF8EE var(--tex-bond) 0 0 / 512px; border: 1px solid var(--bond-shade); box-shadow: 0 1px 0 rgb(29 28 26 / .06), 0 4px 8px -4px rgb(29 28 26 / .22); }
.slip-q .q { font-weight: 700; }
.slip-q .a { margin-top: 6px; }
.slip-q .tag { font: 600 12px/16px var(--font-printed); letter-spacing: .08em; color: var(--carbon); }
.slip-q:nth-child(odd) { rotate: -.3deg; }
.slip-q:nth-child(even) { rotate: .3deg; }
@media (min-width: 760px) {
  .rulecards { gap: 16px; }
  .rulecards li { grid-template-columns: 56px 1fr; padding: 22px 24px; }
  .rulecards .num { font-size: 44px; }
  .rulecards p { font-size: 22px; line-height: 32px; }
  .slips { gap: 18px; }
  .slip-q { padding: 16px 22px 18px; }
}