/* ===== IMAGE FRAMES (2026-11-09) — used by js/frames.js =====
   Images beside text are shown as background images in a frame that matches
   the height of the text column. To switch off: remove the frames.css and
   frames.js tags from the pages (or empty this file). */
.img-frame-row{align-items:stretch!important}
.img-frame-col{display:flex;flex-direction:column}
.img-frame-col>.img-frame,.img-frame-chain{flex:1 1 auto;display:flex;flex-direction:column}
.img-frame-col .img-frame{position:relative;flex:1 1 auto;width:100%;max-width:none!important;margin-left:0!important;margin-right:0!important;min-height:340px;height:auto;background-color:var(--sand);background-size:cover;background-repeat:no-repeat;border-radius:var(--radius);box-shadow:var(--shadow)}
.img-frame-col .img-frame>img.img-frame-src{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none;inset:auto!important}
.img-frame-chain{max-width:none!important;margin-left:0!important;margin-right:0!important;width:100%}
@media (max-width:991.98px){
  .img-frame-col .img-frame{min-height:0;aspect-ratio:4/3;flex:none}
  .img-frame-col>.img-frame,.img-frame-chain{flex:none}
}