* {
    box-sizing: border-box;

}


header {

    background-color: #84994F;
    height: 100px;
}


header>ol {


    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

}


header>ol>li {



    list-style: none;

}


header li:hover {

    text-decoration: underline;

}


main {

    /*     margin-top: 50px; */
    /*    display: grid;
    grid-template-columns: 3fr 1fr; 
    Pasado a comentario por Alfonso */
    background-color: #FFE797;

}


main>div:first-child {

    display: grid;
    grid-template-columns: 50% 40% 10%;
    margin-bottom: 20px;
}

main>div:nth-child(2) {
    display: grid;
    grid-template-columns: 80% 20%;

}

main>div>section {

    display: grid;
    grid-template-columns: 50% 50%;
}

main>div>section>article>div {
    display: grid;
    grid-template-columns: 50% 50%;
}

article img {
    display: block;
    width: 150px;
    height: 140px;
}

article a {

    text-align: center;
    text-decoration: none;
}

article a:hover {

    text-decoration: underline;

}


nav {

    background-color: #FCB53B;

}

/* 
nav ol{


    display: grid;
    grid-template-rows: repeat(5,1fr);

}
No me funciona y reactivo lo del margen */

nav li {

    list-style: none;
    margin-bottom: 50px;
}

nav li:hover {
    text-decoration: underline;

}


footer {
    /*     margin-top: 40px; */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background-color: #A72703;
}

footer img {

    /*     display: inline-block; */
    width: 100px;

}


@media (max-width: 500px) {

    main>div:nth-child(2) {

        grid-template-columns: 70% 30%;

    }

    /* Pasando de filas de dos artículos a filas de uno */

    main>div>section {

        grid-template-columns: 100%;
    }

    /* Partiendo cada artículo */

    /* main>div>section>article>div {
    
    grid-template-columns: 100%;
}
 */


}