@media (min-width: 576px) {
    .grid {
        display: grid;
        grid-template-areas: 'nav filtro' 'nav main' 'nav main' 'footer list';
        grid-template-columns: 0.3fr 1fr;
        grid-template-rows: 1fr 8fr;

    }



    .fa-bars {
        display: none;
    }

    .nav {
        display: flex;
        flex-direction: column;
        margin: 0;
        justify-content: flex-start;
        align-items: center;

    }

    .menu {
        display: flex;
        flex-direction: column;
        list-style: none;
        justify-content: flex-start;
        padding: 0;
    }

    .menu li {
        padding-bottom: 1em;
        text-align: center;
    }

    .content img {
        width: 80%;
    }

    .card {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: auto;

    }

    .main {
        padding: 1%;
    }

    .disable {
        display: flex;
        flex-direction: column;
        align-items: center;


    }

    .list {
        margin-left: 220px;
    }

    .nav img {
        display: flex;

    }

    .menu a{
        color: white;
        text-decoration: none;
    }
}


/* transiciones */


.content img {
    filter: saturate(0);
    width: 70%;
    transition: all 3s;
}

.content img:hover {
    filter: saturate(100%);
    width: 80%;

}

.menu li {
    transform: rotate(0deg) scale(1);
    transition:transform 1s linear;

}

.menu li:hover {
    transform: rotate(0deg) scale(2);
}



/* Animacion */

.nav img {
    animation-name: logo;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes logo {
    from {
        transform: rotate(10deg) scale(1.1);
    }

    to {
        transform: rotate(-10deg) scale(1);
    }
}


.fa-wrench{
    animation-name: icono;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes icono {
    from{
        transform: rotate(10deg) scale(1.1);
    }

    to {
        transform: rotate(-10deg) scale(1);
    }
}