/* Content rotater — i2t3 component styles
 * Three layouts (Karma rotator_layout): default (row of angled snippets),
 * textwithimage (image beside heading/text), collapsedtext (angled snippets
 * overlaid on an image). Pure CSS; transform set inline per snippet.
 */

.i2t3-contentrotater__item {
    display: inline-block;
    margin: 0;
    font-size: clamp(1.1rem, 2.5vw, 1.75rem);
    transform-origin: center;
}

/* textwithimage */
.i2t3-contentrotater__img { width: 100%; height: auto; display: block; }
.i2t3-contentrotater--rounded .i2t3-contentrotater__img { border-radius: .75rem; }
.i2t3-contentrotater__heading { margin-bottom: .75rem; }
.i2t3-contentrotater__text > :last-child { margin-bottom: 0; }

/* collapsedtext (badges over image) */
.i2t3-contentrotater__stage { position: relative; display: inline-block; max-width: 100%; }
.i2t3-contentrotater__badge {
    position: absolute;
    display: inline-block;
    padding: .35rem .75rem;
    background: var(--i2t3-surface, #fff);
    border-radius: .35rem;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .15);
    font-size: clamp(.9rem, 2vw, 1.4rem);
    white-space: nowrap;
}
.i2t3-contentrotater__badge--1 { top: 8%; left: 5%; }
.i2t3-contentrotater__badge--2 { bottom: 10%; right: 6%; }
.i2t3-contentrotater__badge--3 { top: 12%; right: 8%; }
.i2t3-contentrotater__badge--4 { bottom: 14%; left: 8%; }