.mmdb-image {
    width: 100%;
    margin: 0;
}

/*
 * The theme owns the .mmdb-image container size/aspect ratio.
 * Hero media only fills that existing container.
 */
.mmdb-hero-media__image,
.mmdb-hero-media__video,
.mmdb-hero-media__embed {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    border: 0;
}

.mmdb-hero-media__image,
.mmdb-hero-media__video {
    object-fit: cover;
}

.mmdb-hero-media__video {
    background: #000;
}

/*
 * On mobile, native/direct videos can use their real dimensions.
 * YouTube Shorts get the same portrait treatment from their URL hint.
 * Normal YouTube/Vimeo embeds stay in the theme's regular 16:9 box because
 * cross-origin iframes do not expose the source video's native dimensions.
 */
@media (max-width: 640px) {
    /* Images become square on mobile. */
    .mmdb-entity-page .mmdb-image.mmdb-hero-media--image {
        aspect-ratio: 1 / 1;
    }

    /*
     * Videos keep their own mobile behavior:
     * - native/direct portrait videos use their detected dimensions
     * - YouTube Shorts use the portrait URL hint
     */
    .mmdb-entity-page .mmdb-image.mmdb-hero-media.is-portrait,
    .mmdb-entity-page .mmdb-image.mmdb-hero-media--portrait-hint {
        aspect-ratio: var(--mmdb-hero-media-ratio, 9 / 16);
    }
}

.mmdb-block-placeholder {
    padding: 12px 14px;

    border: 1px dashed currentColor;
    border-radius: 4px;

    opacity: 0.65;
}