:root { --source: url("./assets/lin-reference-source.png"); }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #f8f4fa; }
body { display: flex; justify-content: center; }
.character-sheet { width: 676px; max-width: 100vw; overflow: hidden; background: #fff; }
.visual-section { width: 100%; margin: 0; padding: 0; overflow: hidden; background-image: var(--source); background-repeat: no-repeat; background-size: 676px 1200px; background-position-x: 0; }
.visual-section > * { position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.hero { height: 365px; background-position-y: 0; }
.conflict { height: 215px; background-position-y: -365px; }
.views { height: 218px; background-position-y: -580px; }
.details { height: 318px; background-position-y: -798px; }
.footer { height: 84px; background-position-y: -1116px; }

@media (max-width: 675px) {
  .visual-section { background-size: 100vw auto; }
  .hero { height: 54.0vw; background-position-y: 0; }
  .conflict { height: 31.80vw; background-position-y: -54.0vw; }
  .views { height: 32.25vw; background-position-y: -85.80vw; }
  .details { height: 47.04vw; background-position-y: -118.05vw; }
  .footer { height: 12.43vw; background-position-y: -165.09vw; }
}