:root {
    --text-bg-displacement: 2vw;
}

@keyframes string-0-animation {
    0% {
        opacity: 0;
        left: calc(-2 * var(--text-bg-displacement));
    }

    10% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        left: var(--text-bg-displacement);
    }
}

@keyframes string-1-animation {
    0% {
        opacity: 0;
        left: var(--text-bg-displacement);
    }

    10% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        left: calc(-2 * var(--text-bg-displacement));
    }
}

.template-home .template-hero-inner .block-title .text-bg,
.template-hero .template-hero-top .block-title .text-bg,
.template-default .template-hero .template-hero-top .block-title .text-bg,
.template-course-landing .template-hero .template-hero-top .block-title .text-bg,
.template-article .template-hero .template-hero-top .block-title .text-bg,
.block-header.with-text-bg .text-bg {
    pointer-events: none;
    z-index: 0;
    font-size: min(7.5vw, 16rem);
    top: auto;
    left: 0;

    bottom: 100%;
 
    height: fit-content;

    &:has(span:nth-child(2)) {
        left: calc(2 * var(--text-bg-displacement));

    }
}

.template-hero:has(.with-text-bg),
#hero:has(.with-text-bg) {
    --animation-duration: 2s;
    padding-top: 0px;

    .text-bg {
        transform: translateY(min(40%, 5rem));

        &:has(span:nth-child(2)) {
            transform: translateY(min(20%, 5rem));
        }
    }


    @media (min-width: 768px) {
        .template-hero-inner,
        .template-hero-top {
            padding-top: min(12vw, 200px);

            .text-bg {
                .string-0, 
                span:first-child {
                    animation: string-0-animation var(--animation-duration) forwards;
                }
            }

            &:has(.text-bg span:nth-child(2)) {
                padding-top: min(calc(12px + 18vw), 320px);

                .text-bg {
                    span:first-child {
                        white-space: nowrap;
                    }
    
                    .string-1,
                    span:nth-child(2) {
                        animation: string-1-animation var(--animation-duration) forwards;
                    }
                }
            }
        }
    }
}

.block-text-list .block-header.with-text-bg,
.block-chart .block-header.with-text-bg,
.block-topic-grid.background-white-2 .block-header.with-text-bg {

    .container {
        position: relative;
    }

    .text-bg {
        position: absolute;
        transform: none !important;

        > span {
            opacity: 0.55;
        }

    } 

    @media (min-width: 768px) {
        padding-top: min(calc(11vw), 268px);
    }
}