.line-gradient-title {
    --offset: 0;
    position: relative;
    display: block;
    width: 100%;
    height: 300vh
}

@media(prefers-reduced-motion: reduce) {
    .line-gradient-title {
        height: -moz-fit-content;
        height: fit-content
    }
}

.no-js .line-gradient-title {
    height: -moz-fit-content;
    height: fit-content
}

.line-gradient-title__lottie {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    margin-top: var(--offset);
    pointer-events: none
}

.line-gradient-title__lottie>svg,.line-gradient-title__lottie>img {
    position: absolute;
    top: 50%;
    left: -150px;
    width: calc(100% + 300px);
    max-width: initial;
    height: auto;
    transform: translate3d(0, -50%, 0)
}

@media(min-width: 43.75rem) {
    .line-gradient-title__lottie>svg,.line-gradient-title__lottie>img {
        left:0;
        width: 100%
    }
}

.line-gradient-title__sticky {
    position: sticky;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    text-align: center
}

.line-gradient-title__sticky::before,.line-gradient-title__sticky::after {
    position: absolute;
    z-index: 2;
    left: 0;
    content: "";
    width: 100%;
    height: 100px;
    background: linear-gradient(180deg, rgba(5, 5, 5, 0) 0%, rgb(5, 5, 5) 100%)
}

.line-gradient-title__sticky::before {
    top: 0;
    transform: rotate(180deg)
}

.line-gradient-title__sticky::after {
    bottom: 0
}

.line-gradient-title__sticky>video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.line-gradient-title__sticky__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 55px;
    margin: 0 var(--spacer-3);
    z-index: 3
}

@media(min-width: 43.75rem) {
    .line-gradient-title__sticky__content {
        gap:55px
    }
}

@media(min-width: 64rem) {
    .line-gradient-title__sticky__content {
        margin:0
    }
}

.line-gradient-title__sticky__content__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px
}

@media(max-width: 43.6875rem) {
    .line-gradient-title__sticky__content__head h2 {
        font-size:2.25rem
    }
}

.line-gradient-title__sticky__content svg {
    display: block;
    width: 100%;
    height: auto
}

@media(min-width: 43.75rem) {
    .line-gradient-title__sticky__content p {
        max-width:705px
    }
}