/**
 * Image Block Object Fit Extensions
 * Custom styles for object-fit contain option
 */

/* Object fit contain override for images with the custom class */
.newpage-blockbased-styling .wp-block-image.has-object-fit-contain {
    height: auto !important;
}

.newpage-blockbased-styling .wp-block-image.has-object-fit-contain img {
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

/* Above mobile: 49rem width */
@media (min-width: 768px) {
    .newpage-blockbased-styling .wp-block-image.has-object-fit-contain img {
        width: 49rem !important;
    }
}

/* Also apply to generic page styling if it exists */
.generic-page-styling .wp-block-image.has-object-fit-contain {
    height: auto !important;
}

.generic-page-styling .wp-block-image.has-object-fit-contain img {
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

/* Above mobile: 49rem width */
@media (min-width: 768px) {
    .generic-page-styling .wp-block-image.has-object-fit-contain img {
        width: 49rem !important;
    }
}

/* Editor specific styles */
.editor-styles-wrapper .wp-block-image.has-object-fit-contain {
    height: auto !important;
}

.editor-styles-wrapper .wp-block-image.has-object-fit-contain img {
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

/* Above mobile: 49rem width */
@media (min-width: 768px) {
    .editor-styles-wrapper .wp-block-image.has-object-fit-contain img {
        width: 49rem !important;
    }
}