/* Sticky content — i2t3 component styles
 * Two columns: the media sticks while the text column scrolls (md+). Pure CSS
 * via position:sticky — no JS. The stick offset honours a sticky header.
 *
 * The stick offset mirrors the Karma JS plugin padding.top (110px). Override
 * the offset to match a project sticky header via:
 *   :root { --i2t3-sticky-top: 7rem; }
 */

.i2t3-stickycontent__media img {
    /* Karma caps the sticky image at maxWidth 300; img-fluid keeps it from
     * overflowing narrow columns while never exceeding its intrinsic width. */
    max-width: 300px;
    width: 100%;
    height: auto;
    border-radius: .5rem;
}

.i2t3-stickycontent__caption {
    display: block;
    margin-top: .5rem;
}

.i2t3-stickycontent__text > :last-child {
    margin-bottom: 0;
}

@media (min-width: 992px) {
    .i2t3-stickycontent__media {
        position: sticky;
        top: var(--i2t3-sticky-top, 6.875rem);
    }
}