/* Desktop: 16:9 aspect ratio for images with mobile variant */
.has-mobile-image img {
    aspect-ratio: 16/9;
    object-fit: cover;
}

/* Override WP core gallery .is-cropped which sets height:100% at high specificity.
   Core selector: .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img
   Specificity: 42. We match it exactly and add height:auto to let aspect-ratio win. */
.wp-block-gallery.has-nested-images.is-cropped figure.has-mobile-image:not(#individual-image) img {
    aspect-ratio: 16/9;
    object-fit: cover;
    height: auto;
}

/* Mobile: 4:5 aspect ratio */
@media (max-width: 768px) {
    .has-mobile-image img {
        aspect-ratio: 4/5;
        object-fit: cover;
    }

    .wp-block-gallery.has-nested-images.is-cropped figure.has-mobile-image:not(#individual-image) img {
        aspect-ratio: 4/5;
        object-fit: cover;
        height: auto;
    }
}

/* Ensure picture element doesn't break layout */
.has-mobile-image picture {
    display: block;
}

.has-mobile-image picture img {
    width: 100%;
    height: auto;
}