/*********************************************
 * Grid
**********************************************/
.vii-grid-items__grid.vii-flex-grid {
    --grid-gap-x:24px;
    --grid-gap-y:30px;
    --grid-col:4;
}

.vii-grid-items:not(.has-spiral-image) {
    padding-top:var(--vii-spacing-default); padding-bottom:var(--vii-spacing-default);
    background:var(--vii-color-gray-10); margin-bottom:0;
}

/* Has-spiral-image grid items */
.vii-grid-items.has-spiral-image .vii-grid-items__item__thumbnail {aspect-ratio:293/365;}

/* Thumbnail Item */
.vii-grid-items__item__thumbnail {aspect-ratio:292/213;}

/* Title */
.vii-grid-items__item__title {padding:0 10px;}

/* Overlay */
.vii-grid-items__item-inner:before {
    border-radius:var(--vii-border-radius) 0;
    background-color:rgba(0, 0, 0, 0.5); transition:var(--vii-transition);
}

/* Hover */
@media only screen and (min-width:1180px) {
    .vii-grid-items__item-inner:not(:hover):before,
    .vii-grid-items__item-inner:not(:hover) .vii-grid-items__item__title {opacity:0; visibility:hidden;}
}

/* Spiral image */
.vii-grid-items__spiral-image {transform:translate(-50%, 50%);}

/*********************************************
 * Grid Responsive
**********************************************/
@media only screen and (max-width:1024px) {
    .vii-grid-items__grid.vii-flex-grid {
        --grid-gap-x:20px;
    }
    /* Title */
    .vii-grid-items__item .vii-grid-items__item__title {font-size:var(--vii-size-20) !important;}

    /* Grid layout 4 items */
    .vii-grid-items:not(.has-spiral-image) .vii-grid-items__grid {
        overflow:auto; flex-wrap:nowrap; justify-content:flex-start;
        margin-left:calc(-1 * var(--vii-gap-container)); margin-right:calc(-1 * var(--vii-gap-container));
        width:calc(100% + 2 * var(--vii-gap-container));
    }
    .vii-grid-items:not(.has-spiral-image) .vii-grid-items__item {width:300px; min-width:300px;}

    /* hide scrollbar */
    .vii-grid-items:not(.has-spiral-image) .vii-grid-items__grid::-webkit-scrollbar {display:none;}

    /* Hide scrollbar for IE, Edge and Firefox */
    .vii-grid-items:not(.has-spiral-image) .vii-grid-items__grid {
        -ms-overflow-style:none; /* IE and Edge */
        scrollbar-width:none; /* Firefox */
    }

    .vii-grid-items:not(.has-spiral-image) .vii-grid-items__item:first-child,
    .vii-grid-items:not(.has-spiral-image) .vii-grid-items__item:last-child {
        width:calc(300px + var(--vii-gap-container)); min-width:calc(300px + var(--vii-gap-container));}

    .vii-grid-items:not(.has-spiral-image) .vii-grid-items__item:first-child {padding-left:var(--vii-gap-container);}
    .vii-grid-items:not(.has-spiral-image) .vii-grid-items__item:last-child {padding-right:var(--vii-gap-container);}
}
@media only screen and (max-width:768px) {
    .vii-grid-items__grid.vii-flex-grid {
        --grid-gap-y:20px;
        --grid-col:2;
    }
}
@media only screen and (max-width:480px) {
    .vii-grid-items__grid.vii-flex-grid {
        --grid-gap-x:10px;
        --grid-gap-y:10px;
    }
}
@media only screen and (max-width:400px) {
    /* Title */
    .vii-grid-items__item .vii-grid-items__item__title {font-size:var(--vii-size-16) !important;}
}