@media (max-width: 956px){

    .layout {
        grid-template-areas:
            "header header"
            "slider slider"
            "main main"
            "aside aside"
        ;
        grid-template-columns: 100%;
    }

    .layout__articles{
        margin-right: 0;
    }

    .layout__aside{
        margin-top: 4rem;
    }

    .header__container-img{
        width: 100%;
    }

    .header__img{
        width: 100%;
    }

    .login__form-group,
    .login__submit{
        width: 65%;
    }
}


@media (max-width: 696px) {

    .header__nav {
        height: auto;
        padding: 2rem;
    }

    .nav__list {
        display: flex;
        flex-direction: column;
        gap: 3rem;
    }

    .layout__slider {
        height: 30rem;
    }
}


@media (max-width: 500px) {

    .logo__text {
        font-size: 3.5rem;
    }

    .layout__slider {
        height: 22rem;
    }

    .login__form-group,
    .login__submit {
        width: 100%;
    }

    .footer {
        flex-direction: column;
        gap: 2rem;
    }
}

@media (max-width: 400px) {

    .logo__text {
        font-size: 2.5rem;
    }

    .layout__slider {
        height: 16rem;
    }

    .footer {

        font-size: 1.4rem;
    }
}

@media (max-width: 696px){

     .header__nav{
        height: auto;
        padding: 2rem;
     }

     .nav__list{
        display: flex;
        flex-direction: column;
        gap: 3rem;
     }

     .layout__slider{
        height: 30rem;
     }
}

@media (max-width: 500px){

    .logo__text{
        font-size: 3.5rem;
    }

    .layout__slider{
        height: 22rem;
    }

    .footer{
        flex-direction: column;
        gap: 2rem;
    }
}

@media (max-width: 400px){

    .logo__text{
        font-size: 2.5rem;
    }

    .layout__slider{
        height: 16rem;
    }

    .footer{
       font-size: 1.4rem;
    }
}



//Aqui van los media query para el responsive, sin recargar el archivo styles.css
//1° Calcular el media query o primer punto de corte, para aplicar los estilos