.cd-media-constrained{box-sizing:border-box;min-width:0;margin-left:auto;margin-right:auto}
.cd-media-constrained.cd-size-by-width{width:var(--cd-media-width)!important;height:auto!important}
.cd-media-constrained.cd-size-by-height{width:max-content!important;max-width:100%!important;height:auto!important}

/* BEFORE / AFTER — JS resolves height + source aspect into one authoritative rectangle. */
.cd-before-after.cd-size-by-height{height:auto!important;max-width:100%!important}
.cd-before-after.cd-size-by-height .cdba-stage{max-width:100%!important}
.cd-before-after.cd-size-by-width .cdba-stage{width:100%!important;height:auto!important}

/* SLIDER — dots remain part of the component; only the visual stage is constrained. */
.cd-slider.cd-size-by-height{padding:var(--cd-frame,8px) var(--cd-frame,8px) 42px!important}
.cd-slider.cd-size-by-height .cd-slider-stage{height:var(--cd-media-height)!important;width:auto!important;max-width:100%!important;min-height:0!important}
.cd-slider.cd-size-by-width .cd-slider-stage{width:100%!important}

/* PROCESS GALLERY — requested height belongs to main visual stage, caption/thumbs remain below it. */
.cd-process-gallery.cd-size-by-height{width:max-content!important;max-width:100%!important}
.cd-process-gallery.cd-size-by-height .cdpg-public-stage{height:var(--cd-media-height)!important;width:auto!important;max-width:100%!important;aspect-ratio:var(--cd-media-aspect,3 / 2)}
.cd-process-gallery.cd-size-by-width .cdpg-public-stage{width:100%!important}

/* IMAGE NAVIGATOR */
.cd-image-navigator.cd-size-by-height{width:max-content!important;max-width:100%!important}
.cd-image-navigator.cd-size-by-height .cdin-public-image-area{height:var(--cd-media-height)!important;width:auto!important;max-width:100%!important}
.cd-image-navigator.cd-size-by-height .cdin-public-stage{width:auto!important;max-width:100%!important}

/* 3D: height is naturally meaningful for a canvas; shell follows stage. */
.cd-annotated-3d-block.cd-size-by-height{width:100%!important;max-width:100%!important}
.cd-annotated-3d-block.cd-size-by-height .cd3d-stage{height:var(--cd-media-height)!important;min-height:0!important}
.cd-annotated-3d-block.cd-size-by-width{width:var(--cd-media-width)!important}

/* FILTERABLE GALLERY: width sizes gallery; height sizes its gallery viewport, not controls. */
.cd-filter-gallery.cd-size-by-height{width:100%!important;max-width:100%!important}
.cd-filter-gallery.cd-size-by-height .cd-filter-gallery-viewport{height:var(--cd-media-height)!important;min-height:0!important;overflow:auto}

/* CAROUSEL: preserve its established axis behavior. */
.cd-carousel.cd-size-by-height{width:100%!important;max-width:100%!important}
.cd-carousel.cd-size-by-height .cd-carousel-viewport{height:var(--cd-media-height)!important}
.cd-carousel.cd-size-by-height .cd-carousel-track,.cd-carousel.cd-size-by-height .cd-carousel-item{height:100%}
.cd-carousel.cd-size-by-height .cd-carousel-item img{height:100%;width:auto;max-height:100%;object-fit:contain}


/* 0.12.0 image tools — shared single-axis component sizing. */
.cd-deep-zoom.cd-size-by-height{width:100%!important;max-width:100%!important}
.cd-deep-zoom.cd-size-by-height .cd-deep-zoom-stage{height:var(--cd-media-height)!important;aspect-ratio:auto}
.cd-deep-zoom.cd-size-by-width .cd-deep-zoom-stage{width:100%!important}

.cd-layer-viewer.cd-size-by-height{width:100%!important;max-width:100%!important}
.cd-layer-viewer.cd-size-by-height .cd-layer-stage{height:var(--cd-media-height)!important;aspect-ratio:auto}
.cd-layer-viewer.cd-size-by-width .cd-layer-stage{width:100%!important}

.cd-image-story.cd-size-by-height .cd-image-story-stage{height:var(--cd-media-height)!important;min-height:0!important}
.cd-image-story.cd-size-by-width{width:var(--cd-media-width)!important;max-width:100%!important}