/* Shared by the PC editor and published page. Images retain their natural ratio. */
.preview-component[data-type="image_show"],
.preview-component[data-type="image_row"],
.preview-component[data-type="image_row2"] { width:100%; max-width:1200px; }
.preview-component[data-type="image_multi_row"] { width:100%; max-width:100%; }
.preview-component[data-type="image_show"] .component-preview,
.preview-component[data-type="image_row"] .component-preview,
.preview-component[data-type="image_row2"] .component-preview { display:block; width:100%; min-width:0; }
.ir-grid, .i2-grid, .dx-img-row ul, .dx-img-row2 ul { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:12px; width:100%; margin:0; padding:0; list-style:none; }
.ir-grid, .i2-grid, .preview-component[data-type="image_show"] .component-preview { max-width:1200px; margin-left:auto; margin-right:auto; }
.preview-component[data-custom-layout="1"] .ir-grid,
.preview-component[data-custom-layout="1"] .i2-grid,
.preview-component[data-custom-layout="1"][data-type="image_show"] .component-preview { max-width:100%; }
.ir-item, .i2-item, .dx-img-row li, .dx-img-row2 li { min-width:0; margin:0; padding:0; border-radius:0; }
.preview-component[data-type="image_show"] .image-preview { display:block; width:100%; }
.preview-component[data-type="image_show"] .component-preview img,
.ir-item img, .i2-item img, .dx-image-show img, .dx-img-row img, .dx-img-row2 img { display:block; width:100%; max-width:100%; height:auto; object-fit:contain; }
.ir-img-placeholder, .dx-img-row .dx-noimg, .dx-img-row2 .dx-noimg { display:flex; align-items:center; justify-content:center; width:100%; height:120px; background:#f0f0f0; color:#bbb; }
.dx-wrap.dx-img-row, .dx-wrap.dx-img-row2, .dx-wrap.dx-image-show { box-sizing:border-box; width:100%; max-width:1200px; margin:0 auto 20px; }
/* Single/two/three-image components share the same fixed-height fitting rules. */
:is(.preview-component.has-custom-height > .component-preview, .dx-layout-fixed > .dx-layout-inner) > :is(.image-preview, .ir-grid, .i2-grid, .dx-image-show, .dx-img-row, .dx-img-row2) { height:100%; min-height:0; margin-bottom:0; }
:is(.preview-component.has-custom-height > .component-preview, .dx-layout-fixed > .dx-layout-inner) > :is(.image-preview, .dx-image-show),
.dx-layout-fixed > .dx-layout-inner > .dx-image-show > a { display:flex; align-items:center; justify-content:center; }
.dx-layout-fixed > .dx-layout-inner > .dx-image-show > a { width:100%; height:100%; }
:is(.preview-component.has-custom-height > .component-preview, .dx-layout-fixed > .dx-layout-inner) :is(.ir-grid, .i2-grid, .dx-img-row ul, .dx-img-row2 ul) { height:100%; min-height:0; grid-template-rows:minmax(0,1fr); }
:is(.preview-component.has-custom-height > .component-preview, .dx-layout-fixed > .dx-layout-inner) :is(.ir-item, .i2-item, .dx-img-row li, .dx-img-row2 li, .dx-img-row li > a, .dx-img-row2 li > a) { display:flex; align-items:center; justify-content:center; width:100%; height:100%; min-height:0; }
:is(.preview-component.has-custom-height > .component-preview, .dx-layout-fixed > .dx-layout-inner) :is(.image-preview, .ir-grid, .i2-grid, .dx-image-show, .dx-img-row, .dx-img-row2) img { width:auto; max-width:100%; height:auto; max-height:100%; object-fit:contain; transform:none; }
:is(.preview-component.has-custom-height > .component-preview, .dx-layout-fixed > .dx-layout-inner) :is(.ir-img-placeholder, .dx-img-row .dx-noimg, .dx-img-row2 .dx-noimg) { height:100%; min-height:0; }
.preview-component[data-type="image_multi_row"] .component-preview { display:block; width:100%; min-width:0; }
.dx-multi-row { display:flex; align-items:center; box-sizing:border-box; width:100%; max-width:100%; margin:0 auto 20px; overflow:hidden; }
.dx-multi-row-title { flex:0 0 auto; display:flex; align-items:center; justify-content:center; align-self:stretch; margin:0 min(12px,2%) 0 0; padding:0 4px; }
.dx-multi-row-title span { display:block; writing-mode:vertical-rl; text-orientation:upright; white-space:nowrap; line-height:1.2; font-size:min(1em,calc(var(--mr-fixed-height,10000px) / (var(--mr-title-count) * 1.2))); }
.dx-multi-row-viewport { flex:1 1 0%; min-width:0; overflow:hidden; }
.dx-multi-row-track { display:flex; width:100%; }
.dx-multi-row-group { box-sizing:border-box; flex:0 0 100%; min-width:0; display:grid; grid-template-columns:repeat(var(--mr-count),minmax(0,1fr)); align-items:center; gap:min(var(--mr-gap),calc(40% / var(--mr-count))); }
.dx-multi-row-item { display:block; min-width:0; margin:0; padding:0; }
.dx-multi-row .dx-multi-row-item img { display:block; width:100%; max-width:100%; height:auto; margin:0; border:0; border-radius:0; object-fit:contain; }
/* Pass the configured height through the entire row before fitting each image. */
:is(.preview-component.has-custom-height > .component-preview, .dx-layout-fixed > .dx-layout-inner) > .dx-multi-row { height:100%; margin-bottom:0; }
:is(.preview-component.has-custom-height > .component-preview, .dx-layout-fixed > .dx-layout-inner) > .dx-multi-row :is(.dx-multi-row-viewport, .dx-multi-row-track, .dx-multi-row-group, .dx-multi-row-item) { height:100%; min-height:0; }
:is(.preview-component.has-custom-height > .component-preview, .dx-layout-fixed > .dx-layout-inner) > .dx-multi-row .dx-multi-row-group { grid-template-rows:minmax(0,1fr); }
:is(.preview-component.has-custom-height > .component-preview, .dx-layout-fixed > .dx-layout-inner) > .dx-multi-row .dx-multi-row-item { display:flex; align-items:center; justify-content:center; }
:is(.preview-component.has-custom-height > .component-preview, .dx-layout-fixed > .dx-layout-inner) > .dx-multi-row .dx-multi-row-item img { width:auto; max-height:100%; }
.dx-multi-row.is-scrolling .dx-multi-row-track { width:calc(200% * var(--mr-count) / var(--mr-visible)); animation:dxMultiRowScroll var(--mr-duration) linear infinite; }
.dx-multi-row.is-scrolling .dx-multi-row-group { flex-basis:50%; padding-right:min(var(--mr-gap),calc(40% / var(--mr-count))); }
.dx-multi-row:hover .dx-multi-row-track, .dx-multi-row:focus-within .dx-multi-row-track { animation-play-state:paused; }
@keyframes dxMultiRowScroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) {
    .dx-multi-row.is-scrolling .dx-multi-row-track { width:100%; animation:none; }
    .dx-multi-row.is-scrolling .dx-multi-row-group { flex-basis:100%; padding-right:0; }
    .dx-multi-row.is-scrolling .dx-multi-row-group[aria-hidden="true"] { display:none; }
}