.module-svg-animation {
    margin-inline: auto;
}

.module-svg-animation__inner {
    --module-svg-animation-radius: var(--media-radius);

    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    border-radius: var(--module-svg-animation-radius);
    -webkit-clip-path: inset(0 round var(--module-svg-animation-radius));
    clip-path: inset(0 round var(--module-svg-animation-radius));
    transform: translateZ(0);
}

.module-svg-animation__inner[data-svg-animation-reveal]:not(.is-scroll-revealed) svg,
.module-svg-animation__inner[data-svg-animation-reveal]:not(.is-scroll-revealed) svg *,
.module-svg-animation__inner[data-svg-animation-reveal]:not(.is-scroll-revealed) svg::before,
.module-svg-animation__inner[data-svg-animation-reveal]:not(.is-scroll-revealed) svg *::before,
.module-svg-animation__inner[data-svg-animation-reveal]:not(.is-scroll-revealed) svg::after,
.module-svg-animation__inner[data-svg-animation-reveal]:not(.is-scroll-revealed) svg *::after {
    animation-play-state: paused !important;
}

.module-svg-animation svg {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: auto;
}

.module-svg-animation__inner > :not(svg) {
    display: block;
    width: 100%;
    max-width: 100%;
}

.module-svg-animation__embed {
    position: relative;
    isolation: isolate;
    width: 100%;
    overflow: hidden;
    transform: translateZ(0);
}

.module-svg-animation.has-ratio .module-svg-animation__inner,
.module-svg-animation.has-ratio .module-svg-animation__embed {
    aspect-ratio: var(--svg-animation-ratio);
    min-height: 0;
}

.module-svg-animation.has-ratio .module-svg-animation__inner > svg,
.module-svg-animation.has-ratio .module-svg-animation__embed,
.module-svg-animation.has-ratio .module-svg-animation__frame {
    width: 100%;
    height: 100%;
}

.module-svg-animation.has-ratio .module-svg-animation__inner > svg {
    object-fit: cover;
}

.module-svg-animation.is-height-auto .module-svg-animation__embed {
    aspect-ratio: auto;
    min-height: 0;
}

.module-svg-animation__frame {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    overflow: hidden;
}

.module-svg-animation.is-height-auto .module-svg-animation__frame {
    position: static;
    height: var(--svg-animation-auto-height, 1px);
}

@media (max-width: 1023px) {
    .module-svg-animation.has-mobile-ratio .module-svg-animation__inner,
    .module-svg-animation.has-mobile-ratio .module-svg-animation__embed {
        aspect-ratio: var(--svg-animation-mobile-ratio);
        min-height: 0;
    }

    .module-svg-animation.has-mobile-ratio .module-svg-animation__inner > svg,
    .module-svg-animation.has-mobile-ratio .module-svg-animation__embed,
    .module-svg-animation.has-mobile-ratio .module-svg-animation__frame {
        width: 100%;
        height: 100%;
    }

    .module-svg-animation.has-mobile-ratio .module-svg-animation__inner > :not(svg) {
        width: 100%;
        height: 100%;
        min-height: 0;
        aspect-ratio: auto !important;
        overflow: hidden;
    }

    .module-svg-animation.has-mobile-ratio .module-svg-animation__inner > svg {
        object-fit: cover;
    }

    .module-svg-animation.has-mobile-ratio.is-height-auto .module-svg-animation__frame {
        position: absolute;
        height: 100%;
    }
}