main{
    background-image: url('/img/blog-back.jpg');
    background-size: 100% auto;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    min-height: 100vh;
}

main .grid{
    padding: 40px 5%;
    font-size: 0;
    min-height: 100vh;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.85);
}

    .grid .article{
        display: inline-block;
        font-size: 15px;
        vertical-align: top;
        width: 30%;
        margin: 15px 1.65%;
        background-color: #fff;
    }
        .grid .article a{
            display: block;
        }
        
        
        .grid .article img{
            width: 100%;
            display: block;
        }
            
            .grid .article figcaption{
                padding: 10px
            }
                .grid .article .chars{
                    margin-bottom: 10px;
                    font-size: 12px;
                }
                
                .grid .article .chars *{
						font-size: 12px;
						color: #999;
						display: inline-block;
						vertical-align: bottom;
						padding: 3px;
						padding-left: 16px;
						margin-right: 5px;
						background-size: 13px auto;
						background-position: left center;
						background-repeat: no-repeat;


					}
					.grid .article .chars time{
						background-image: url('/img/blog-date.png')
					}
					.grid .article .chars .views{
						background-image: url('/img/blog-views.png')
					}
					
                .grid .article h2{
                    color: #333;
                    font-size: 1.1em;
                    margin-bottom: 15px;
                    
                }
                .grid .article a:hover h2{
                    color: var(--main-color);
                }
                
                .grid .article p{
                    color: #333;
                    font-size: 13px;
                }
                
                .grid .article p b{
                    color: var(--main-color);
                }