/**
 * Responsive Packery gallery.
 *
 * The formatter keeps the original Bootstrap column classes on every tile:
 *   col-12 col-md-6 col-lg-4 mb-0
 *
 * Before Packery starts, Bootstrap provides the fallback layout. Once
 * Packery is active, this stylesheet neutralises Bootstrap's row gutters and
 * uses one explicit gap value. This prevents Bootstrap and Packery from both
 * contributing width, padding and offsets to the same layout calculation.
 */
.custom-glightbox-gallery {
  --custom-gallery-gap: 1rem;
  width: 100%;
}

.custom-glightbox-gallery__grid {
  position: relative;
}

.custom-glightbox-gallery__link,
.custom-glightbox-gallery__image {
  display: block;
  width: 100%;
}

.custom-glightbox-gallery__image {
  height: auto;
  max-width: 100%;
}

/*
 * Packery mode.
 *
 * The row and g-3 classes remain in the HTML as the Bootstrap fallback, but
 * Packery must be the only layout system controlling the active gallery.
 */
.custom-glightbox-gallery__grid.is-packery-ready {
  display: block !important;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

.custom-glightbox-gallery__grid.is-packery-ready
  > .custom-glightbox-gallery__item {
  box-sizing: border-box;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

/* Keep the same Bootstrap breakpoints and effective column counts. */
@media (min-width: 768px) {
  .custom-glightbox-gallery__grid.is-packery-ready
    > .custom-glightbox-gallery__item {
    width: calc((100% - var(--custom-gallery-gap)) / 2);
  }
}

@media (min-width: 992px) {
  .custom-glightbox-gallery__grid.is-packery-ready
    > .custom-glightbox-gallery__item {
    width: calc((100% - (2 * var(--custom-gallery-gap))) / 3);
  }
}