@charset "utf-8";

/*GLOBAL STYLE*/

article{
    width: 100%;
    min-width: 200px;
}

div{
    width: 100%;
    float: left;
    line-height: 0;
}

img{
    width: 100%;
}

/*MEDIA QUERIES*/


@media (max-width: 320px){
    body{
        background-color: #513932;
    }
    
    img{
        margin-bottom: 7%;
    }
    
    article{
        margin-top: 7%;
    }
}


@media (min-width: 321px) and (max-width: 500px){
    div{
        width: 50%;
    }
}


@media (min-width: 501px) and (max-width: 600px){
    
    article{
        max-width: 600px;
    }
    
    div{
        width: 33.3%;
    }
}


@media (min-width: 601px) and (max-width: 700px){
    article{
        max-width: 700px;
    }
    
    div{
        width: 25%;
    }
}


@media (min-width: 701px) and (max-width: 800px){
   article{
        max-width: 800px;
    }
    
    div{
        width: 20%;
    }
}


@media (min-width: 801px) and (max-width: 900px){
     article{
        max-width: 900px;
    }
    
    div{
        width: 16.6667%;
    }
}


@media (min-width: 901px) and (max-width: 1000px){
    article{
        max-width: 1000px;
    }
    
    div{
        width: 14.28571%;
    }
}


@media (min-width: 1001px) and (max-width: 1100px){
    article{
        max-width: 1100px;
    }
    
    div{
        width: 12.5%;
    }
}


@media (min-width: 1101px) and (max-width: 1200px){
    article{
        max-width: 1200px;
    }
    
    div{
        width: 11.11111%;
    }
}


@media (min-width: 1201px){
    body{
        background-color: black;
    }
    
    article{
        margin: 15px auto 0 auto;
        max-width: 1500px;
    }
    
    div{
        width: 10%;
        margin-bottom: 15px;
    }
}