/* Banner image animations */
.wimpli-banner-card__media-inner {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform-origin: center center;
    will-change: transform;
}

.wimpli-banner-card__media.has-image .wimpli-banner-card__media-inner {
    background-image: var(--banner-media-bg);
}

.wimpli-banner-card__media--anim-1 .wimpli-banner-card__media-inner {
    animation: wimpli-banner-anim-pan-left 18s ease-in-out infinite;
}

.wimpli-banner-card__media--anim-2 .wimpli-banner-card__media-inner {
    animation: wimpli-banner-anim-pan-right 18s ease-in-out infinite;
}

.wimpli-banner-card__media--anim-3 .wimpli-banner-card__media-inner {
    animation: wimpli-banner-anim-pan-up 18s ease-in-out infinite;
}

.wimpli-banner-card__media--anim-4 .wimpli-banner-card__media-inner {
    animation: wimpli-banner-anim-pan-down 18s ease-in-out infinite;
}

.wimpli-banner-card__media--anim-5 .wimpli-banner-card__media-inner {
    animation: wimpli-banner-anim-zoom-in 18s ease-in-out infinite;
}

.wimpli-banner-card__media--anim-6 .wimpli-banner-card__media-inner {
    animation: wimpli-banner-anim-zoom-out 18s ease-in-out infinite;
}

@keyframes wimpli-banner-anim-pan-left {
    0%,
    100% {
        transform: translate3d(5%, 0, 0) scale(1.14);
    }

    50% {
        transform: translate3d(-5%, 0, 0) scale(1.14);
    }
}

@keyframes wimpli-banner-anim-pan-right {
    0%,
    100% {
        transform: translate3d(-5%, 0, 0) scale(1.14);
    }

    50% {
        transform: translate3d(5%, 0, 0) scale(1.14);
    }
}

@keyframes wimpli-banner-anim-pan-up {
    0%,
    100% {
        transform: translate3d(0, 5%, 0) scale(1.14);
    }

    50% {
        transform: translate3d(0, -5%, 0) scale(1.14);
    }
}

@keyframes wimpli-banner-anim-pan-down {
    0%,
    100% {
        transform: translate3d(0, -5%, 0) scale(1.14);
    }

    50% {
        transform: translate3d(0, 5%, 0) scale(1.14);
    }
}

@keyframes wimpli-banner-anim-zoom-in {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(0, 0, 0) scale(1.2);
    }
}

@keyframes wimpli-banner-anim-zoom-out {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1.2);
    }

    50% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wimpli-banner-card__media-inner {
        animation: none !important;
    }
}