body {
}

* {
    margin: 0;
    padding: 0;
}
.tpq {
    width: 1200px;
    margin: 0 auto;
    position: relative;
}
.container1 {
    float: left;
    width: 33.33%;
    margin-top:10px;
} 
.img-container {
    border: 1px solid #ccc;
    padding: 5px;
    margin: 10px;
} 
 .img-container:hover {
        border: 1px solid #999999;
    } 
 .img-container img {
        width: 100%;
        height: auto;
    }

.desc {
    padding: 10px;
    text-align: center;
    overflow:hidden;
}
 

@media only screen and (max-width:1366px) { 
    .tpq {
        width: 1200px;
        margin: 0 auto;
    } 
    .container1 {
        width: 33.33%;
    }
}

@media only screen and (max-width:1000px) {
    .container1 {
        width: 33.33%;
    } 
    .tpq {
        width: 100%;
    }
}

@media only screen and (max-width:800px) {
    .tpq {
        width: 100%;
    } 
    .container1 {
        width: 50%;
    }
}

@media only screen and (max-width:600px) {
    .tpq {
        width: 100%;
    } 
    .container1 {
        width: 100%;
    }
}