/* zoom (components/zoom.js): a picture grows to fill the screen on the page, and goes back */
img.zoomable { cursor: zoom-in; }
img.zoomable:focus-visible { outline: 2px solid var(--gray-1200); outline-offset: -2px; }
.zoom-box { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  display: none; place-items: center; background: rgb(0 0 0 / 0.72); cursor: zoom-out; overflow: hidden; }
.zoom-box[open] { display: grid; }
.zoom-box::backdrop { background: transparent; }
.zoom-box img { display: block; max-width: none; border-radius: 8px; box-shadow: 0 20px 60px -20px rgb(0 0 0 / 0.5); background: #fff; will-change: transform; }