/****************************
 * Image Grid
****************************/
.twc-image-grid {
    --ig-spacing-top:var(--twc-spacing-155);
    --ig-spacing-bottom:12vw;
    --ig-spacing-image:60px;
    position:relative; overflow:hidden;
}

/* Layout if has content */
.has-content {
    width:var(--twc-100vw); margin-left:calc(-1 * var(--twc-gap-side)); margin-right:0;
    padding:var(--ig-spacing-top) var(--twc-gap-side) 0;
}
.has-content .twc-image-grid__wavy-shape {position:absolute; width:calc(var(--twc-100vw) + 4px);}
.has-content .twc-image-grid__wavy-shape.up {top:0; left:-2px; height:15.5vw;}
.has-content .twc-image-grid__wavy-shape.down {
    top:calc(100% - var(--ig-spacing-bottom)); height:21vw;
    left:50%; transform:translateX(-50%);
}
.has-content .twc-image-grid__wrapper {margin-left:var(--negative-spacing); margin-right:var(--negative-spacing);}
.has-content .twc-image-grid__icon {position:relative; z-index:5;}

/* Content */
.twc-image-grid__content {
    max-width:750px; position:relative;
    margin-left:auto; margin-right:auto; padding-bottom:var(--twc-spacing-100);
}
.twc-image-grid__content:before {
    content:""; display:block;
    width:var(--twc-100vw); height:calc(100% + var(--ig-spacing-top) / 2); background:var(--twc-color-gray);
    position:absolute; top:calc(-1 * var(--ig-spacing-top) / 2); left:50%; transform:translateX(-50%);
}
.twc-image-grid__content-inner {position:relative; z-index:5;}

/* Image grid */
.twc-image-grid__inner {margin:calc(-1 * var(--ig-spacing-image) / 2);}
.twc-image-grid__item {padding:calc(var(--ig-spacing-image) / 2);}
.twc-image-grid__item-inner {overflow:hidden; border-radius:10px;}
.twc-image-grid__item a {display:block; transition:var(--twc-transition);}
.twc-image-grid__item a:before {
    content:""; position:absolute; top:0; left:0; bottom:0; right:0;
    background:#000; transition:all .4s ease; opacity:0;
}
.twc-image-grid__item a:hover:before {opacity:.3;}
.twc-image-grid__item a:hover {transform:scale(1.03);}
.twc-image-grid__item img {width:100%; height:100%;}

@media only screen and (min-width:769px) {
    /* image size */
    .twc-image-grid__item.third {width:33.33%;}

    /* image ratio */
    .twc-image-grid__item.full .twc-image-grid__item-inner {padding-top:35%;}
    .twc-image-grid__item.half .twc-image-grid__item-inner {padding-top:61%;}
    .twc-image-grid__item.third .twc-image-grid__item-inner {padding-top:61%;}
}
@media only screen and (min-width:481px) {
    /* image size */
    .twc-image-grid__item.half {width:50%;}
}

/* image size */
.twc-image-grid__item.full {width:100%;}

/* custom for pattern 2 */
@media only screen and (min-width:1181px) {
    .twc-image-grid.pattern-2 {--ig-spacing-image:95px;}
}

/****************************
 * Image Grid Responsive
****************************/
@media only screen and (max-width:1439px) {
    .twc-image-grid__content:before {}
}
@media only screen and (max-width:1180px) {
    .twc-image-grid {--ig-spacing-image:var(--twc-gap-container);}

}
@media only screen and (max-width:768px) {
    .twc-image-grid {--ig-spacing-bottom:8vw;}
    .twc-image-grid__item.third {width:50%;}
    .twc-image-grid__content:before {
        height:calc(100% + var(--ig-spacing-top));
        top:calc(-1 * var(--ig-spacing-top));
    }
}
@media only screen and (max-width:480px) {
    .has-content {padding-top:15vw;}
    .twc-image-grid__item, .twc-image-grid__item.third {width:100%;}
}