/* Shared by the panel and the site so crop previews use the same framing. */
.technical-media-slot{--technical-image-height:180px;display:grid;place-items:center;width:100%;height:var(--technical-image-height);min-width:0}
.technical-visual{position:relative;display:grid;place-items:center;overflow:hidden;min-width:0;width:100%;height:100%;background:transparent}
.technical-visual img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:100%;min-width:0;min-height:0;object-fit:contain}
.technical-visual.is-cropped{height:auto;max-height:100%;width:min(100%,calc(var(--technical-image-height)*var(--technical-ratio)))}
.technical-visual.is-cropped img{position:absolute;inset:0;object-fit:cover}
.option-images>figure{padding:22px;background:#f1f0ed;border-radius:5px;text-align:center}
.technical-crop-editor>.technical-media-slot{--technical-image-height:300px;margin-bottom:16px;background:#eeece5;border-radius:4px}
.technical-crop-editor .crop-help{font-size:12px;line-height:1.6;color:#79766b}
/* Options uses the same card widths and spacing as Dimensions at every breakpoint. */
.module-grid,.technical-images.option-images{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media(min-width:1500px){.module-grid,.technical-images.option-images{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:800px){.module-grid,.technical-images.option-images{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.module-grid,.technical-images.option-images{grid-template-columns:1fr}}