/*********************************************
 * Blog
**********************************************/
.vii-blog-element {
    --col-gap:40px;
}
.vii-blog-element__list-group {width:calc(50% - var(--col-gap) / 2);}
.vii-blog-element__list-group.nth-1 {
    --grid-width:100%;
    --gap:0;
    --space:0;
}
.vii-blog-element__list-group.nth-1 .vii-blog-item__thumbnail-bg {aspect-ratio:1;}
.vii-blog-element__list-group.nth-1 .vii-blog-item__title {font-size:var(--vii-size-h5);}
.vii-blog-element__list-group.nth-2 {
    --grid-width:calc(50% - var(--col-gap) / 2);
    --gap:0;
    --space:calc(var(--vii-spacing-40px) / 2);

    display:flex; flex-wrap:wrap; justify-content:space-between;
    margin:calc(-1 * var(--space)) 0;
}


.vii-blog-element .vii-body-gradient {
    width:var(--vii-100vw); left:50%; right:auto;
    transform:translateX(-50%);
}
.vii-blog-element__inner {padding-top:var(--vii-spacing-65px);}
.vii-blog-element__inner.has-decor {padding-top:calc(var(--vii-spacing-65px) * 2);}

.vii-blog-element__illus {
    top:var(--vii-spacing-50px); right:-4vw;
}
.vii-blog-element__illus img {width:50vw !important; max-width:400px;}

.vii-blog-element__sparkles {
    top:-5vh; left:-5vw;
    width:60vw !important; max-width:600px !important;
    opacity:.4; mix-blend-mode:screen;
}

/*********************************************
 * Blog Responsive
**********************************************/
@media only screen and (max-width:1280px) {
    .vii-blog-element {
        --col-gap:20px;
    }
}
@media only screen and (max-width:1023px) {
    .vii-blog-element__list-inner {justify-content:center;}
    .vii-blog-element__list-group {width:100%; max-width:768px;}
    .vii-blog-element__list-group.nth-1 {margin-bottom:var(--vii-spacing-40px);}
    .vii-blog-element__list-group.nth-1 .vii-blog-item__thumbnail-bg {aspect-ratio:4/3;}
    .vii-blog-element__list-group.nth-1 .vii-blog-item__title {font-size:15px;}

    .vii-blog-element__illus img {max-width:270px;}
}
@media only screen and (max-width:480px) {
    .vii-blog-element__list-group.nth-2 {--grid-width:100%;}

    .vii-blog-element__list-group.nth-2 {margin:0;}
    .vii-blog-element .vii-blog-item {padding:0;}
    .vii-blog-element__list-group:not(:last-child),
    .vii-blog-element .vii-blog-item:not(:last-child) {padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid #d5d5d5;}

    .vii-blog-element__illus {right:-22vw;}
    .vii-blog-element__illus img {max-width:50vw;}
}