/* A real responsive document loaded into the Grid lesson's device frames.
   Changing iframe width changes the CSS viewport, so actual @media rules apply.
   No JavaScript, image files, external fonts or dynamic services are needed. */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;font:600 14px/1.45 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#18332d;background:#eee8da}
.specimen{height:100vh;min-height:100vh;padding:clamp(12px,2.5vw,28px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(12px,2vw,22px)}
.specimen-heading,.specimen-footer{display:flex;justify-content:space-between;gap:14px;align-items:center;font-size:clamp(10px,1.35vw,15px);letter-spacing:.11em}
.specimen-heading p{margin:0}
.specimen-counter{color:#4e6b60}
.specimen-footer{font-size:clamp(9px,.95vw,12px);color:#42594f}
.specimen-grid{display:grid;min-height:0;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));gap:clamp(4px,.8vw,9px);border:clamp(4px,.8vw,9px) solid #203831;background:#203831}
.specimen-tile{display:block;min-width:0;min-height:0}
.tile-1{grid-area:1/1/4/3;background:#d2aa5a}
.tile-2{grid-area:1/3/3/7;background:#e7e0ca}
.tile-3{grid-area:1/7/5/9;background:#c35c47}
.tile-4{grid-area:4/1/7/3;background:#a9c2bc}
.tile-5{grid-area:3/3/5/5;background:#dd907c}
.tile-6{grid-area:3/5/6/7;background:#d0c9b7}
.tile-7{grid-area:5/7/7/9;background:#87a9bb}
.tile-8{grid-area:6/3/7/7;background:#e3ba5f}
.tile-9{grid-area:5/3/6/5;background:#eae4d5}
/* Tablet: keep the same nine elements, change their spatial relationships. */
@media(max-width:900px){
  .specimen-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(7,minmax(0,1fr))}
  .tile-1{grid-area:1/1/4/3}
  .tile-2{grid-area:1/3/3/6}
  .tile-3{grid-area:1/6/5/7}
  .tile-4{grid-area:4/1/8/3}
  .tile-5{grid-area:3/3/5/5}
  .tile-6{grid-area:3/5/7/6}
  .tile-7{grid-area:5/6/8/7}
  .tile-8{grid-area:7/3/8/6}
  .tile-9{grid-area:5/3/7/5}
}
/* Phone: four columns, a taller composition, still the exact same HTML. */
@media(max-width:540px){
  .specimen{gap:12px;padding:12px}
  .specimen-heading,.specimen-footer{font-size:10px;letter-spacing:.06em;flex-wrap:wrap}
  .specimen-counter{display:none}
  .specimen-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(9,minmax(0,1fr));gap:5px;border-width:5px}
  .tile-1{grid-area:1/1/3/3}
  .tile-2{grid-area:1/3/3/5}
  .tile-3{grid-area:3/1/5/2}
  .tile-4{grid-area:5/1/9/2}
  .tile-5{grid-area:3/2/5/4}
  .tile-6{grid-area:3/4/7/5}
  .tile-7{grid-area:7/4/10/5}
  .tile-8{grid-area:9/1/10/4}
  .tile-9{grid-area:5/2/9/4}
}
@media(forced-colors:active){.specimen-tile{border:1px solid CanvasText}}