.bestrotation-wrapper {
    display: inline-block;
    max-width: 100%;
}

.bestrotation-wrapper .bestrotation-image {
    display: block;
    max-width: 100%;
    height: auto;
}

.bestrotation-wrapper .bestrotation-text {
    margin-top: 0.5em;
}

/* Animationen: Distanz über CSS-Variable --bestrotation-distance, Dauer via Inline-style animation-duration */

/* Fade */
.bestrotation-anim-fade {
    animation-name: bestrotationFadeIn;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}
@keyframes bestrotationFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Slide von rechts */
.bestrotation-anim-slide {
    animation-name: bestrotationSlideInRight;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}
@keyframes bestrotationSlideInRight {
    from { opacity: 0; transform: translateX(var(--bestrotation-distance, 20px)); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Slide von unten nach oben */
.bestrotation-anim-slide_up {
    animation-name: bestrotationSlideInUp;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}
@keyframes bestrotationSlideInUp {
    from { opacity: 0; transform: translateY(var(--bestrotation-distance, 20px)); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Slide von oben nach unten */
.bestrotation-anim-slide_down {
    animation-name: bestrotationSlideInDown;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}
@keyframes bestrotationSlideInDown {
    from { opacity: 0; transform: translateY(calc(var(--bestrotation-distance, 20px) * -1)); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Zoom */
.bestrotation-anim-zoom {
    animation-name: bestrotationZoomIn;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}
@keyframes bestrotationZoomIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

/* Rotate */
.bestrotation-anim-rotate {
    animation-name: bestrotationRotateIn;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}
@keyframes bestrotationRotateIn {
    from { opacity: 0; transform: rotate(-10deg); }
    to   { opacity: 1; transform: rotate(0deg); }
}