:root {
  color-scheme: light;
  --page-width: 8.5in;
  --page-height: 11in;
  --screen-page-width: min(100%, 960px);
  --screen-gap: clamp(18px, 4vw, 44px);
  --screen-bg: #eef2f7;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--screen-bg);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--screen-bg);
  font-family: Arial, Helvetica, sans-serif;
}

.document {
  width: 100%;
  min-height: 100vh;
  padding: var(--screen-gap) clamp(10px, 3vw, 32px);
}

.sheet {
  width: var(--screen-page-width);
  aspect-ratio: 8.5 / 11;
  margin: 0 auto var(--screen-gap);
  overflow: hidden;
  background: white;
  box-shadow: 0 18px 55px rgb(15 23 42 / 18%);
}

.sheet:last-child {
  margin-bottom: 0;
}

.sheet img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

@page {
  size: letter;
  margin: 0;
}

@media print {
  :root {
    --page-width: 8.5in;
    --page-height: 11in;
  }

  html,
  body {
    width: var(--page-width);
    min-width: 0;
    margin: 0;
    padding: 0;
    background: white;
  }

  .document {
    width: var(--page-width);
    min-height: 0;
    padding: 0;
  }

  .sheet {
    width: var(--page-width);
    height: var(--page-height);
    margin: 0;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
  }

  .sheet:last-child {
    break-after: auto;
    page-break-after: auto;
  }
}