/* ContentCallout snippet — shared styles */

.cnt-callout {
    @media screen and (min-width: 1280px) {
        padding-inline: 1.4rem 2.22rem;
    }

    /* The picture carries `max-cnt` (width: max-content) so it shrink-wraps the
       image and sits on the left. But the global `picture img { width: 100% }`
       rule gives the picture a percentage-sized child, which contributes nothing
       to a max-content container — collapsing the picture (and image) to zero
       width. Let the image size to its natural width instead so max-content has
       something to measure; max-width keeps it within the callout. */
    picture img {
        width: auto;
        max-width: 100%;
    }
}