/* Chapter 5: sensor size and crop factor */

/* A 3:2 full-frame picture that zooms from its centre; the photo view takes the sensor's shape */
.frame{position:relative;aspect-ratio:3/2;border-radius:8px;overflow:hidden;background:#000}
.zoom{position:absolute;left:0;top:50%;width:100%;aspect-ratio:3/2;transform-origin:50% 50%;transition:transform .15s ease-out}
.zoom svg{display:block;width:100%;height:100%}
.crop-box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:2px solid var(--amber);border-radius:2px;box-shadow:0 0 0 999px #000000a0;transition:width .15s ease-out,height .15s ease-out}
.crop-box[hidden]{display:none}
.crop-box span{position:absolute;left:6px;top:4px;font:700 13px var(--sans);color:var(--amber)}

/* Sensors to scale */
.sizes{display:block;width:100%;max-width:340px;height:auto;margin-top:20px}
.sizes rect{fill:none;stroke:var(--muted);stroke-width:1.5}
.sizes rect.on{fill:color-mix(in srgb,var(--amber) 28%,transparent);stroke:var(--amber);stroke-width:2}
.sizes text{font:700 13px var(--sans);fill:var(--ink)}

.sensor-table td:nth-child(n+3){font-variant-numeric:tabular-nums}
#crop .cols{margin-top:32px}

@media (max-width:760px){
  /* the table's middle columns drop on phones */
  .sensor-table th:nth-child(2),.sensor-table td:nth-child(2),.sensor-table th:nth-child(5),.sensor-table td:nth-child(5){display:none}
}