/****************************
 * Image Grid
****************************/
.bb-image-grid {
    --ig-gap:34px;
    --ig-ratio:522/392;
}
.bb-image-grid__inner {
    --grid-gap-x:var(--ig-gap);
    --grid-gap-y:var(--ig-gap);
}
.bb-image-grid__item {
    /* re-calculate new width */
    --grid-gap-x-total:calc(var(--grid-gap-x) * (var(--grid-col) - 1));
    --grid-space-each:calc(var(--grid-gap-x-total) / var(--grid-col));
}
.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 a:before {background:#000; transition:opacity .5s ease; opacity:0; z-index:2;}
.bb-image-grid__item a:hover:before {opacity:.3;}
.bb-image-grid__item a:hover img {transform:scale(1.03);}

/* a11y */
.bb-image-grid__item-image:focus-visible {border-radius:var(--bb-radius);}

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

/* image > full width */
.bb-image-grid.pattern-1 .bb-image-grid__content {max-width:880px; padding-left:var(--bb-gap-container); padding-right:var(--bb-gap-container);}
.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:1025px) {
    .pattern-2 .bb-image-grid__inner {
        --grid-gap-x:52px;
    }
}
@media only screen and (min-width:481px) {
    .pattern-3 .bb-image-grid__inner {
        --grid-col:3;
        --ig-ratio:1;
    }
}

/* 4 columns */
@media only screen and (min-width:920px) {
    .bb-image-grid.col-4 .bb-image-grid__inner {--grid-col:4;}
}
/* 5 columns */
@media only screen and (min-width:1024px) {
    .bb-image-grid.col-5 .bb-image-grid__inner {--grid-col:5;}
}
@media only screen and (min-width:920px) and (max-width:1023px) {
    .bb-image-grid.col-5 .bb-image-grid__inner {--grid-col:4;}
}
/* 6 columns */
@media only screen and (min-width:1180px) {
    .bb-image-grid.col-6 .bb-image-grid__inner {--grid-col:6;}
}
@media only screen and (min-width:1024px) and (max-width:1179px) {
    .bb-image-grid.col-6 .bb-image-grid__inner {--grid-col:5;}
}
@media only screen and (min-width:920px) and (max-width:1023px) {
    .bb-image-grid.col-6 .bb-image-grid__inner {--grid-col:4;}
}


/****************************
 * 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 {
        --ig-gap:10px;
        --grid-col:2;
    }
    .bb-image-grid__item:not(.full) .bb-image-grid__item-image {border-radius:15px;}
}