/****************************
 * Image Grid
****************************/
/* fancybox */
.twc-image-grid__item a {display:block; overflow:hidden; border-radius:10px 0 0 10px;}
.twc-image-grid:not(.pattern-1) .twc-image-grid__item img {transition:var(--twc-transition);}
.twc-image-grid__item a:before {background:#000; transition:var(--twc-transition); opacity:0; z-index:1;}
.twc-image-grid__item a:hover:before {opacity:.5;}
.twc-image-grid__item a:hover img {transform:scale(1.05);}

/* image size */
@media only screen and (min-width:1768px) {
    .twc-image-grid.pattern-3 .twc-image-grid__inner {--twc-grid-col:3;}
}
@media only screen and (min-width:481px) {
    .twc-image-grid.pattern-2 .twc-image-grid__inner,
    .twc-image-grid.pattern-4 .twc-image-grid__inner {--twc-grid-col:2;}
}
.twc-image-grid.pattern-1 .twc-image-grid__inner {--twc-grid-col:1;}

/* image ratio */
.twc-image-grid__item.half .twc-image-grid__item-image {aspect-ratio:572/365;}
.twc-image-grid__item.third .twc-image-grid__item-image {aspect-ratio:358/293;}

/* custom for pattern 1 */
.twc-image-grid.pattern-1 {padding-left:var(--twc-gap-side);}
.twc-image-grid.pattern-1 .twc-image-grid__item-image {height:clamp(275px, 27vw, 333px);}

/* has shape */
.twc-image-grid.has-shape {
    --ig-shape-w:98px;
    --ig-shape-h:141px;
    position:relative;
}
.twc-image-grid.has-shape:before {
    content:""; display:block; z-index:1; pointer-events:none;
    width:var(--ig-shape-w); height:var(--ig-shape-h); background:var(--twc-color-primary);
    clip-path:polygon(0 33.33%, 100% 0, 100% 66.67%, 0 100%);
    position:absolute; top:calc(-1 / 3 * var(--ig-shape-h)); left:calc(100% - var(--twc-gap-side) + 8px);
}
.twc-image-grid:not(.pattern-1).has-shape:before {left:calc(100% - var(--ig-shape-w) / 2);}

/****************************
 * Image Grid - Responsive
****************************/
@media only screen and (max-width:1439px) {
    .twc-image-grid.has-shape:before {left:calc(100% - var(--twc-gap-side) - var(--ig-shape-w) / 2);}
}
@media only screen and (max-width:1180px) {
    .twc-image-grid.has-shape {--ig-shape-w:80px; --ig-shape-h:120px;}
    .twc-image-grid.has-shape:before {left:auto; right:0;}
    .twc-image-grid:not(.pattern-1).has-shape:before {left:auto; right:calc(-1 * var(--twc-gap-side));}
}
@media only screen and (max-width:768px) {
    .twc-image-grid.has-shape {--ig-shape-w:60px; --ig-shape-h:100px;}
    .twc-image-grid.has-shape:before {left:auto; right:0;}
}