* {
    margin: 0px;
    padding: 0px;
    /*  lo ponemos todo a cero desde el principio*/
    box-sizing: border-box;
    /*  no le suma el padding, se lo resta*/

}

body {

    color: #ffffff;
}

.container {
    max-width: 800px;
    margin: 0 auto;

}


.gallery li {

    margin: 4px;
}


@media (min-width:200px) {
    .container {
        width: 100%;
        min-height: 100vh;
    }


    .container h1 {
        margin: 10px;
        display: flex;
        justify-content: center;
       text-align: center;
        font-size: 15px;
        color: #817e7e;
    }

    .gallery {

        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        list-style: none;

        padding: 0;
        margin-bottom: 5px;
    }

    .gallery img {
        width: auto;
        height: 120px;

    }
}

@media (min-width: 700px) {

    .container {
        width: 100%;
        min-height: 100vh;
    }


    .container h1 {
        margin: 10px;
        display: flex;
        justify-content: center;
        font-size: 25px;
        color: #817e7e;
    }

    .gallery {

        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        list-style: none;
        padding: 0;
        margin-bottom: 30px;
    }

    .gallery img {
        width: auto;

        height: 190px;
    }
}

@media (min-width:1024px) {
    .container {

        min-height: 100vh;
    }


    .container h1 {
        color: #817e7e;
        margin: 10px;
        display: flex;
        justify-content: center;
        font-size: 23px;
    }

    .gallery {

        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        list-style: none;
        padding: 0;
        margin-bottom: 40px;
    }

    .gallery img {
       height: 230PX;

        width: AUTO;
    }

    .
}