.hero-with-lottie {
    display: flex;
    align-items: center;
    gap: 16px
}

    .hero-with-lottie .intro-text {
        flex: 1 1 auto
    }

.tagline {
    margin: 0 0 6px;
    line-height: 1.15
}

.desc {
    margin: 0;
    line-height: 1.45
}

.intro-lottie {
    width: 220px;
    height: 220px;
    min-width: 140px;
    pointer-events: none;
    overflow: hidden
}

@media (max-width:768px) {
    .hero-with-lottie {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px
    }

    .intro-lottie {
        order: -1;
        width: clamp(100px,32vw,150px);
        height: auto;
        aspect-ratio: 1/1;
        margin-bottom: 6px
    }

        .intro-lottie svg {
            width: 100% !important;
            height: 100% !important;
            display: block
        }

    .hero-with-lottie .intro-text {
        max-width: 26rem
    }
}

@media (max-width:380px) {
    .intro-lottie {
        width: clamp(90px,44vw,140px)
    }
}