/*********************************************
 * Blog Detail
**********************************************/
/* Banner */
.site-banner {padding-top:50px;}
.site-banner__top {gap:10px var(--vii-gap-container); border-bottom:1px solid rgba(10, 21, 43, .2);}

/* Content */
.site-content__wrapper {--bd-width-sidebar:391px;}
.site-content__wrapper aside {width:var(--bd-width-sidebar);}
.site-content__wrapper .site-content__inner {
    --vii-spacing-default:0px;
    width:calc(100% - var(--bd-width-sidebar)); padding-left:54px;
}

/* Sticky */
.site-content__sticky {top:20px; left:0;}
body.scroll-up .site-content__sticky {top:calc(20px + var(--vii-header-height-sticky));}

/* Share button */
.vii-share-block {
    margin-top:var(--vii-spacing-24); padding-top:var(--vii-spacing-16);
    border-top:1px solid rgba(10, 21, 43, .2);
}

/* Slider */
.vii-blog-slider {padding-top:var(--vii-spacing-48); border-top:1px solid rgba(10, 21, 43, .2);}

/* No toc */
.site-content.no-toc .ev-content-wrapper {margin-left:auto; margin-right:auto; max-width:876px;}
.site-content.no-toc .ev-content-wrapper {--vii-spacing-default:var(--vii-spacing-48);}
.site-content.no-toc .vii-share-block {
    padding:var(--vii-spacing-16) calc((var(--vii-container) - 876px) / 2);
    position:relative;
}

/*********************************************
 * Blog Detail Responsive
**********************************************/
@media only screen and (max-width:1180px) {
    .site-banner {padding-top:var(--vii-spacing-20);}
    .site-content__wrapper {
        --bd-width-sidebar:350px;
    }
    .site-content__wrapper .site-content__inner {padding-left:var(--vii-gap-container);}
}
@media only screen and (max-width:920px) {
    .site-content__wrapper {
        --vii-spacing-default:var(--vii-spacing-36);
        flex-direction:column; position:relative; padding-bottom:100px;
    }
    .site-content__wrapper aside, .site-content__wrapper .site-content__inner {width:100%;}
    .site-content__wrapper aside {margin-bottom:35px;}
    .site-content__wrapper .site-content__inner {padding-left:0;}
    .site-content__sticky {position:static;}
    .vii-share-block {position:absolute; left:0; right:0; bottom:0;}
    .site-content:not(.no-toc) .vii-blog-slider {margin-top:-20px;}
}
@media only screen and (max-width:480px) {
    .site-content__wrapper {padding-bottom:85px;}
    .site-banner__top .vii-back-button {display:none;}
    .site-banner__top {margin-bottom:var(--vii-spacing-32);}
}