.batch-framing-compare article{position:relative;overflow:hidden}
.batch-framing-compare .compare-frame{aspect-ratio:1;background:#fff;border:1px solid #dce5f1;box-shadow:inset 0 0 0 12px #f4f7fb}
.batch-framing-compare .compare-frame.fit img{width:calc(100% - 38px);height:calc(100% - 38px);object-fit:contain}
.batch-framing-compare .compare-frame.crop img{width:100%;height:100%;object-fit:cover;object-position:center}
.batch-framing-compare ul{display:grid;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.batch-framing-compare li{position:relative;padding-left:25px;color:#34445d;font-size:.85rem;line-height:1.5}
.batch-framing-compare li::before{content:"✓";position:absolute;left:0;top:0;color:#087052;font-weight:950}
.batch-demo .demo-config{grid-template-columns:repeat(3,minmax(0,1fr))}
.batch-demo .demo-config button{align-self:end}
.batch-demo [data-batch-padding-wrap] output{font-variant-numeric:tabular-nums;font-weight:900;color:#125adb}
@media(max-width:980px){.batch-demo .demo-config{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.batch-demo .demo-config{grid-template-columns:1fr}.batch-framing-compare .compare-frame{max-height:none}}