/*********************************************
 * Page
**********************************************/
.vii-page-list {
    --gap-half:15px;
}
.vii-page-list__items-group {width:calc(50% - var(--gap-half) / 2);}
.vii-page-list__item.nth-2 {margin-bottom:var(--gap-half);}

.vii-page-list__item.nth-1 .vii-page-list__item-bg {padding-top:100%;}
.vii-page-list__items-group.nth-2 .vii-page-list__item-bg {padding-top:48.85%;}

.vii-page-list__item-inner {overflow:hidden; border-radius:var(--vii-radius); position:relative;}
.vii-page-list__item-title {
    position:absolute; bottom:var(--vii-spacing-30px); left:0; width:100%; z-index:2;
    transition:var(--vii-transition);
}
.vii-page-list__item-inner:after {
    content:""; position:absolute; bottom:0; left:0;
    width:100%; height:150px;
    background:linear-gradient(rgba(0, 0, 0, 0) 0%, #000 100%);
    opacity:0.5;
    transition:var(--vii-transition-slow);
}

@media (hover:hover) {
    a:hover .vii-page-list__item-title {transform:translateY(-50%); opacity:0;}
    a:hover .vii-page-list__item-inner:after {height:300px;}
}

.vii-page-list__illus {
    --height:80px;
    --bottom-space:var(--vii-spacing-25px);
}

/*********************************************
 * Page Responsive
**********************************************/
@media only screen and (max-width:1024px) {
    .vii-page-list {
        --gap-half:10px;
    }
}
@media only screen and (max-width:767px) {
    .vii-page-list__item.nth-1 {margin-bottom:var(--gap-half);}
    .vii-page-list__items-group {width:100%;}

    .vii-page-list__item.nth-1 .vii-page-list__item-bg,
    .vii-page-list__items-group.nth-2 .vii-page-list__item-bg {padding-top:48.85%;}

    .vii-page-list__item {max-width:500px; margin-left:auto; margin-right:auto;}
    .vii-page-list__item-title {bottom:18px;}

    .vii-page-list__illus {--height:65px;}
}