.lienzo-timeline{
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    background: url(https://enfaf.com/wp-content/themes/lienzo/assets/images/bg-2.webp) no-repeat;
    background-size: contain;
    background-attachment: fixed;
    background-position: center;
    padding: 200px 10px;
    
    &::before, &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 300px;
        pointer-events: none;
        z-index: 1;
    }

    &::before {
        background: linear-gradient(180deg, var(--wp--preset--color--primary) 0%, rgba(255, 255, 255, 0) 100%);
        top: 0;
    }

    &::after {
        background: linear-gradient(0deg, var(--wp--preset--color--primary) 0%, rgba(255, 255, 255, 0) 100%);
        bottom: 0;
    }
    
    & header{
        display: grid;
        align-self: start;
        gap: 1rem;
        position: sticky;
        top: 0;
        padding: 25% 0;

        & .subtitle{
            justify-self: start;
            color: var(--wp--preset--color--secondary);
            font-size: var(--wp--preset--font-size--normal);
            border-radius: 20px;
            padding: 10px;
            margin: 0;
            position: relative;
            z-index: 1;

            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: -1;
                border-radius: 15px;
                background: linear-gradient(54deg, 
                    color-mix(in srgb, var(--wp--preset--color--secondary), black 80%) 10%, 
                    color-mix(in srgb, var(--wp--preset--color--secondary), black 30%) 45%, 
                    color-mix(in srgb, var(--wp--preset--color--secondary), white 15%) 50%, 
                    color-mix(in srgb, var(--wp--preset--color--secondary), black 30%) 55%, 
                    color-mix(in srgb, var(--wp--preset--color--secondary), black 80%) 90%
                );
                padding: 1px;
                mask: linear-gradient(white, white) content-box, linear-gradient(white, white) border-box;
                mask-composite: exclude;
                z-index: 2;
            }
        }

        & .title{
            font-size: var(--wp--preset--font-size--xxl-large);
            margin: 0;
            background-image: linear-gradient(85deg, #F8F9FA 60%, #8b8c8e 100%);
            background-clip: text;
            color: transparent;
        }

        & .description{
            font-size: var(--wp--preset--font-size--normal);
            color: var(--wp--preset--color--text-secondary);
            margin: 0;
        }
    }
}

@media screen and (max-width: 600px){
    .lienzo-timeline {
        grid-template-columns: 1fr;
        padding: 50px 10px 150px 10px;

        & header{
            position: relative;
            padding: 0  0 100px 0;
        }
    }
}