.anatomy { display: grid; gap: 18px; }
.hands { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: 50% 58%; border: 6px solid var(--bond); box-shadow: var(--shadow-paper); rotate: -.6deg; background: var(--bond-shade); }
.anat-card { position: relative; padding: 4px 14px 14px 42px; border: 1px solid var(--rule); background: rgb(255 253 246 / .55); }
.anat-card .plate { margin-top: 10px; margin-left: -28px; font-size: 14px; line-height: 20px; }
.anat-card .fields > div { position: relative; margin-top: 12px; }
.anat-card .fields dt { font-size: 12px; }
.anat-card .fields dd { font-size: 14px; line-height: 21px; }
.anat-card .fields .say { font-size: 15px; line-height: 22px; }
.mark {
  position: absolute; left: -32px; top: 0; width: 24px; height: 24px; border: 2px solid var(--stamp); border-radius: 50%;
  color: var(--stamp); font: 700 13px/20px var(--font-typed); text-align: center;
}
.anat-card .flimsy { padding: 8px 10px; margin-left: 0; background: var(--flimsy); color: var(--carbon); text-shadow: 0 0 .4px currentColor; }
.anat-card .flimsy .mark { left: -42px; top: 6px; }
.anat-card .flimsy dt { color: var(--carbon-soft); }
@media (min-width: 760px) {
  .anatomy { grid-template-columns: 300px 1fr; align-items: stretch; gap: 28px; }
  .hands { aspect-ratio: auto; align-self: stretch; height: auto; min-height: 0; object-position: 50% 50%; }
  .anat-card { padding: 6px 18px 18px 48px; }
  .anat-card .plate { margin-left: -34px; }
  .mark { left: -38px; }
  .anat-card .flimsy .mark { left: -48px; }
  .anat-card .fields dd { font-size: 15px; line-height: 22px; }
  .anat-card .fields .say { font-size: 17px; line-height: 25px; }
}