/****************************
 * Image Grid
****************************/
.bb-image-grid {
    --ig-gap:57px;
    --ig-spacing-top:35px;
    --ig-ratio:612/379;
}
.bb-image-grid__inner {
    --grid-gap-x:var(--ig-gap);
    --grid-gap-y:var(--ig-gap);
}
.bb-image-grid__item-image {aspect-ratio:var(--ig-ratio); transform:translateZ(0);}
.bb-image-grid__item:not(.full) .bb-image-grid__item-image img {transition:transform .5s ease;}

/* Gallery */
.bb-image-grid__item button:before {background:#000; transition:opacity .5s ease; opacity:0; z-index:2;}
.bb-image-grid__item button:hover:before {opacity:.3;}
.bb-image-grid__item button:hover img {transform:scale(1.03);}

/* image caption */
.bb-image-grid__item-caption {text-align:center; font-size:14px; font-weight:500;}

/* image > full width */
.bb-image-grid__item.full {width:100%;}
.bb-image-grid__item.full .bb-image-grid__item-image {aspect-ratio:unset; height:clamp(250px, 34.72vw, 500px);}

/* 2 columns */
.bb-image-grid__item.half {--grid-col:2;}

/* 3 columns */
@media only screen and (min-width:481px) {
    .pattern-3 .bb-image-grid__item.third {
        --grid-col:3;
        --ig-ratio:390/574;
    }
}

/****************************
 * Image Grid > Fullwidth
****************************/
/* General */
.vc_row.vc_row-no-padding[data-vc-full-width] .bb-image-grid {margin-left:0; margin-right:0;}
.vc_row.vc_row-no-padding[data-vc-full-width] .bb-image-grid:not(.custom-layout) {
    --ig-gap:var(--bb-spacing-padding);
    --ig-ratio:681/400;
}
.vc_row.vc_row-no-padding[data-vc-full-width] .bb-image-grid__inner {
    --bb-gap-container:var(--bb-spacing-padding);
    max-width:100%;
}

/* 1 image */
.vc_row[data-vc-full-width].vc_row-no-padding .bb-image-grid__item.full .bb-image-grid__item-image {
    height:clamp(250px, 30.56vw, 440px);
}


/****************************
 * Image Grid > Custom layout
****************************/
.bb-image-grid.custom-layout {--ig-ratio:297/451;}
.bb-image-grid.custom-layout .bb-image-grid__inner {display:flex; flex-wrap:wrap; gap:var(--grid-gap-y) 0;}
.bb-image-grid.custom-layout .bb-image-grid__item:nth-child(even) {--ig-ratio:0;}
@media only screen and (min-width:481px) {
    .bb-image-grid.custom-layout .bb-image-grid__item:nth-child(3n + 1),
    .bb-image-grid.custom-layout .bb-image-grid__item:nth-child(3n + 3) {width:23.25%;}

    .bb-image-grid.custom-layout .bb-image-grid__item:nth-child(3n + 2) {
        width:53.5%; padding:var(--ig-spacing-top) var(--ig-gap);
        position:relative;
    }
    .bb-image-grid.custom-layout .bb-image-grid__item:nth-child(3n + 2) .bb-image-grid__item-image {
        position:absolute; inset:var(--ig-spacing-top) var(--ig-gap); width:auto; height:auto; aspect-ratio:unset;
    }
}

/* Fullwidth */
@media only screen and (min-width:1801px) {
    .vc_row.vc_row-no-padding[data-vc-full-width] .bb-image-grid.custom-layout {
        --ig-gap:86px;
        --ig-spacing-top:55px;
    }
    .vc_row.vc_row-no-padding[data-vc-full-width] .custom-layout .bb-image-grid__item-image {border-radius:20px;}
}
@media only screen and (min-width:481px) {
    .vc_row.vc_row-no-padding[data-vc-full-width] .custom-layout .bb-image-grid__inner {padding:0;}
    .vc_row.vc_row-no-padding[data-vc-full-width] .custom-layout .bb-image-grid__item:first-child .bb-image-grid__item-image {
        border-top-left-radius:0;
        border-bottom-left-radius:0;
    }
    .vc_row.vc_row-no-padding[data-vc-full-width] .custom-layout .bb-image-grid__item:last-child .bb-image-grid__item-image {
        border-top-right-radius:0;
        border-bottom-right-radius:0;
    }
}


/****************************
 * Image Grid Responsive
****************************/
@media only screen and (max-width:1024px) {
    .bb-image-grid {
        --ig-gap:var(--bb-gap-container);
        --ig-spacing-top:var(--bb-gap-container);
    }
}
@media only screen and (max-width:480px) {
    .bb-image-grid__inner.bb-flex-grid {
        --ig-gap:10px;
        --grid-col:2;
    }

    /* Custom layout for 3 images */
    .bb-image-grid.custom-layout .bb-image-grid__inner {gap:var(--bb-spacing-60);}
    .bb-image-grid.custom-layout {--ig-ratio:1;}
    .bb-image-grid.custom-layout .bb-image-grid__item:nth-child(odd) {padding:0 var(--bb-spacing-60);}
    .bb-image-grid.custom-layout .bb-image-grid__item:nth-child(even) {--ig-ratio:343/277;}
}