.pics{
    list-style: none;
    width: 100%;
}

.pics>li{
    width: 100%;
    height: 6em;
    /* background-color: rgb(241, 210, 210); */
    margin: 1em 0;
    border-bottom: 1px dotted rgb(165, 164, 164);
    padding-bottom: 1em;
}

.pics>li>a{
    display: block;
    width: 100%;
    height: 6em;
    /* background-color: rgb(240, 168, 168); */
}

.pics>li>a:hover{
    background-color: #f5f5f5;
}
.pics>li>a>img{
    width: 10em;
    height: 6em;
    float: left;
}
.pics>li>a>h3{
    float: left;
    margin-left: 1em;
    line-height: 2em;
    font-size: 12pt;
    font-weight: 700;
    color: #666;
    max-width: 60%;
}

@media screen and (max-width: 736px)
{
    
    .pics>li>a>img{
        width: 5em;
        height: 4em;
        float: left;
    }
    .pics>li>a>h3{
        max-width: 60%;
    }
}

@media screen and (max-width: 500px)
{
    
    .pics>li>a>img{
        width: 5em;
        height: 3em;
        float: left;
    }
    .pics>li>a>h3{
        max-width: 66%;
    }
}