.home-hero{
    aspect-ratio: 4/2;
    max-width: 100%;
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    & .hero-actions{
        background-image: url('/sites/default/files/images/pages/hero-acciones-completadas.jpg');
        background-size: cover;
        background-position: top right;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        min-height: 50vh;
        padding: 1rem;
        position: relative;
    }

    & .hero-column-2{
        display: flex;
        flex-direction: column;
        gap: 1rem;
        & > div{
            flex: 1;
        }
    }   
}

.home-hero{
    & .acciones-stats{
        color: var(--color-background);
        font-size: 1.8rem;
        text-align: center;

        & .acciones-stats__stats{
            color: inherit;
            font-size: 2.5rem;
            font-weight: 800;
            & .acciones__completed{
                font-size: 5.5rem;
                font-weight: 900;
            }
        }

        & p{
            margin: 0;
            font-weight: 600;
        }
    }
}

.hero-last-post{
    & .post-teaser{
        overflow: hidden;
        & .post__title{
            & .field--name-title{
                scale: 1;
                transform: translateX(100%);
                animation: move-right-left 30s linear infinite;
                width: max-content;
            }

            & .post__date{
                transform-origin: 0;
                transform: translateY(100%) scale(2);
                animation: movescale-bottom-up .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 5s forwards;
            }
        }
    }
}

@keyframes move-right-left {
    from{
        transform: translateX(100%);
    }

    to{
        transform: translateX(-100%);
    }
}

@keyframes movescale-bottom-up {
    from{
        transform: translateY(100%) scale(2);
    }

    to{
        transform: translateY(0) scale(1);
    }
}


.hero-grid-ejes{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1rem;

    & .grid__item{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
        font-weight: 300;
        padding: 1rem;

        & .eje__icon{
            font-size: 3rem;
            transition: transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        & .eje__name{
            transition: transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        &:last-child{
            color: #000;
        }

        &:hover{
            & .eje__icon{
                transform: translateY(0.25rem);
            }

            & .eje__name{
                transform: translateY(-0.25rem);
            }
        }
    }
}

@media screen and (max-width:1023px) {
    .home-hero{
        aspect-ratio: 4/2;
        grid-template-columns: repeat(1, 1fr);
    }
}

@media screen and (max-width:767px) {
    .hero-grid-ejes{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }
}

.home-content{

    & .home-content__header{
        display: flex;
        align-items: center;
        gap: 2rem;

        & > div{
            flex: 1;
        }

        & .home-content__title{
            position: relative;
            & h2{
                font-size: 2.5rem;
                text-transform: uppercase;
            }
        }

        & iframe{
            border-radius: 1rem;
            aspect-ratio: 19/6;
            max-width: 100%;
        }        
    }
}

@media  screen and (max-width: 1023px) {
    .home-content{
        & .home-content__header{
            flex-direction: column;
        }
    }
}

@media  screen and (max-width: 767px) {
    .home-content{
        & .home-content__header{
            & .home-content__title{
                & h2{
                    font-size: 2rem;
                }
            }
        }
    }
}

.home-que-es-dti{
    background-image: url('/sites/default/files/images/pages/que-es-dti.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;

    & .container{
        justify-content: center;
        align-items: center;
    }

    & .icon-dti{
        width: 90px;
    }

    & a{
        text-decoration: underline;
        color: #fff;;
    }
}

.home-acciones-buttons{
    background-color: var(--color-gray-10);

    & .container{
        max-width: 1100px;
        gap: 2rem;
    }

    & .acciones__button{
        flex: 1;        
    }
}

@media screen and (max-width: 767px) {
    .home-acciones-buttons{
        & .container{
            flex-direction: column;
        }
    }
}