body{
    background: linear-gradient(90deg,rgba(223, 238, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

#nextgen {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-top: 100px;
    background-image: url(../../../es/assets/img/portada-videos/top-nextgen.webp);
    background-repeat: no-repeat;
    background-position: top;
    display: grid;
}
    #nextgen section{
        background: none;
        text-align: left;
    }
    #nextgen #introduccion{
        padding: 0 25px;
        max-width: 1280px;
        margin: 25px auto;
    }
    #nextgen section:not(#introduccion){
        padding: 0 20px 60px 20px;
    }
        #nextgen section h1,
        #nextgen section h2,
        #nextgen section h3{
            text-align: left;
        }
        #nextgen section > span{
            color: var(--gris-110)
        }
        #nextgen section > h1{
            color: var(--azul-o);
            font-size: 5em;
        }
        #nextgen section > h2{
            color: var(--azul);
            font-size: 2em;
            text-shadow: none;
            margin-top: 0;
            font-weight: 400;
        }
            #nextgen section > h2 b{
                font-weight: 700;
            }
        #nextgen section > p{
            font-size: 1.4em;
            font-weight: 300;
            color: var(--azul-o);
        }
        #nextgen section h2{
            color: var(--azul-o);
        }
        #nextgen section h3{
            color: var(--azul);
        }
        #introduccion span{
            font-size: 24px;
            color: var(--gris-70);
        }
    #articulos{
        display: grid;
        grid-gap: 20px;
    }
        #articulos h2{
            margin-bottom: 5px;
        }
       #nextgen.pagina-interna:not(#correlatividades) article{
            display: grid;
            grid-template-columns: 1fr;
            position: relative;
            grid-gap: 25px 50px;
            padding: 25px;
            border: solid 1px var(--gris-230);
            box-shadow: 0 0 1px var(--azul);
            border-radius: 10px;
            transition: all .2s ease-in;
            background-color: var(--blanco);
        }

        @media screen and (min-width: 560px) {
            #nextgen.pagina-interna:not(#correlatividades) article{
                animation-name: show;
                animation-fill-mode: both;
                view-timeline-name: --articulo;
                view-timeline-axis: block;
                animation-timeline: --articulo;
                animation-range: entry 0% cover 40%;
            }
                #nextgen.pagina-interna:not(#correlatividades) article:nth-child(n+2){
                    animation-delay: .5s;
                }

            @keyframes show {
                from{
                    opacity: 0;
                    left: 60px;
                }
                to{
                    opacity: 1;
                    left: 0;
                }
            }
        }

       #nextgen.pagina-interna article div div{
            margin: 0;
        }
            #nextgen.pagina-interna:not(#correlatividades) article:hover{
                box-shadow: 0 0 20px var(--azul);
                border-radius: 25px;
                color: var(--azul);
                font-size: 20dvh;
                transform: scale(1.015);
                z-index: 5;
            }
            #articulos article h1{
                grid-column: 1/-1;
                z-index: 2;
                color: var(--azul);
                margin-top: 10px;
            }
            #articulos article h2{
                grid-column: 1/-1;
                z-index: 2;
            }
            #articulos article name-tag{
                background-color: var(--gris-230);
                padding: 3px 7px;
                margin-right: 4px;
                border-radius: 20px;
                font-size: 13px;
                color: var(--azul-o);
                z-index: 2;
            }
            #articulos article p{
                line-height: 1.4em;
                z-index: 2;
            }
            #articulos article::after{
                position: absolute;
                bottom: 0;
                right: 25px;
                font-size: 10dvh;
                font-family: var(--space);
                font-weight: 200;
                color: rgba(210,210,230,.5);
                z-index: 1;
                transition: all .2s ease;
                opacity: .3;
                content: attr(data-num);
            }
                #nextgen.pagina-interna:not(#correlatividades) article:hover::after{
                    font-size: 20dvh;
                }

            /*Videos*/
            #nextgen .video .video-thumbnail{
                width: auto;
                aspect-ratio: 9/16;
            }
            /*Btn cargar más*/
            #btn-cargar-mas{
                margin: 0 auto;
                padding: 1.6dvh 3dvw 2dvh 3dvw;
                margin-bottom: 40px;
                position: relative;
                cursor: pointer;
            }
                #btn-cargar-mas::before{
                    font-family: var(--iconos);
                    content: 'add_circle_outline';
                    position: relative;
                    margin-right: 6px;
                    font-size: 1.4em;
                    font-weight: 400;
                    top: 5px;
                    display: inline-block;
                    transition: all .2s ease;
                }
                    #btn-cargar-mas:hover::before{
                        transform: scale(1.2);
                    }

    @media screen and (min-width: 560px) {
        #articulos article p{
            column-count: 2;
            column-gap: 3dvw;
        }
        #nextgen.pagina-interna:not(#correlatividades) article{
            padding: 35px 50px;
        }
    }

    @media screen and (min-width: 769px) {
        #nextgen #introduccion{
            padding: 0 80px 0 80px;
        }
        #nextgen section:not(#introduccion){
            padding: 0 80px 20px 80px;
        }
            #nextgen.pagina-interna:not(#correlatividades) article{
                grid-template-columns: auto 1fr;
            }
            #nextgen.pagina-interna:not(#correlatividades) article::after{
                opacity: 1;
            }
                #nextgen.pagina-interna:not(#correlatividades) article:hover::after{
                    color: var(--azul);
                }
    }