/*********************************************
 * Page Blog Overview
**********************************************/
/*blog list*/
.vii-blog-list {
    --spacing-item-x:95px; --spacing-item-y:48px;
}
.vii-blog-list__inner {
    margin:calc(-1 * var(--spacing-item-y) / 2) calc(-1 * var(--spacing-item-x) / 2);
    position:relative;
}
.vii-blog-list__inner:before, .vii-blog-list__inner:after {
    content:"";
    width:100%; height:calc(var(--spacing-item-y) / 2); background:var(--vii-color-bg);
    position:absolute; left:0; z-index:10;
}
.vii-blog-list__inner:before {top:0;}
.vii-blog-list__inner:after {bottom:0;}
.vii-blog-list .vii-blog-item {
    width:33.33%;
    padding:calc(var(--spacing-item-y) / 2) calc(var(--spacing-item-x) / 2);
    position:relative;
}
.vii-blog-list .vii-blog-item:after {
    content:"";
    width:2px; height:100%; background:#f0f0f0;
    position:absolute; top:0; right:-1px;
}
.vii-blog-list .vii-blog-item:nth-child(3n):after {display:none;}

/*********************************************
 * Page Blog Overview Responsive
**********************************************/
@media only screen and (max-width:1180px) {
    .vii-blog-list {--spacing-item-x:80px; --spacing-item-y:40px;}
}
@media only screen and (max-width:1024px) {
    .vii-blog-list {--spacing-item-x:40px;}
}
@media only screen and (max-width:768px) {
    .vii-blog-list {--spacing-item-x:20px;}
    .vii-blog-list .vii-blog-item {width:50%;}
    .vii-blog-list .vii-blog-item:nth-child(3n):after {display:block;}
    .vii-blog-list .vii-blog-item:nth-child(even):after {display:none;}
}
@media only screen and (max-width:480px) {
    .vii-blog-list {--spacing-item-y:var(--vii-spacing-default);}
    .vii-blog-item__inner {--vii-spacing-30:15px;}
    .vii-blog-list .vii-blog-item {width:100%;}
    .vii-blog-list .vii-blog-item:after {display:none !important;}
}