/* Creative Edge Toolkit for YOOtheme Pro — Image Contain */

.el-image-contain {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    max-width: 100%;
}

/*
 * Image-optimization plugins that serve WebP/AVIF (WP-Optimize, ShortPixel,
 * EWWW, Imagify, ...) often wrap the <img> in <picture>. `display: contents`
 * makes the <img> itself the flex item again, so the rules below still size
 * it — otherwise it falls back to full width and appears cropped.
 */
.el-image-contain > picture {
    display: contents;
}

.el-image-contain img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}