.mod-masonry-image-grid {
  overflow: hidden;
}
.mod-masonry-image-grid .grid {
  margin-left: calc(-.5 * var(--row-gap));
  margin-right: calc(-.5 * var(--row-gap));
  margin-top: calc(-1 * var(--column-gap));
}
.mod-masonry-image-grid .grid-item {
  padding-left: calc(.5 * var(--row-gap));
  padding-right: calc(.5 * var(--row-gap));
  padding-top: var(--column-gap);
  width: calc(100%/var(--columns)); 
  max-width: 100%;
}
.mod-masonry-image-grid .grid-item button {
  border: none;
  border-radius: 0;
  width: 100%;
  padding: 0;
  background: none;
}
.mod-masonry-image-grid .grid-item img {
  width: 100%;
}
.mod-masonry-image-grid .grid-item .img-placeholder {
  display: block;
  background-color: var(--color-gray);
  width: 100%;
  min-height: 20rem;
}
@supports (aspect-ratio:auto) {
  .mod-masonry-image-grid .grid-item .img-placeholder {
    aspect-ratio: 1/1;
    min-height: unset;
  }
  /* https://www.the215guys.com/learning/nth-child-cicada-principle/ */
  .mod-masonry-image-grid .grid-item:nth-child(2n) .img-placeholder {
    aspect-ratio: 2/3
  }
  .mod-masonry-image-grid .grid-item:nth-child(3n) .img-placeholder {
    aspect-ratio: 4/5
  }
  .mod-masonry-image-grid .grid-item:nth-child(5n) .img-placeholder {
    aspect-ratio: 9/16
  }
  .mod-masonry-image-grid .grid-item:nth-child(7n) .img-placeholder {
    aspect-ratio: 4/3
  }
  .mod-masonry-image-grid .grid-item:nth-child(11n) .img-placeholder {
    aspect-ratio: 1/1
  }
  .mod-masonry-image-grid .grid-item:nth-child(13n) .img-placeholder {
    aspect-ratio: 2/3
  }
  .mod-masonry-image-grid .grid-item:nth-child(17n) .img-placeholder {
    aspect-ratio: 4/5
  }
}
.mod-masonry-image-grid dialog {
  inset: 0;
  margin: auto;
  border: none;
  width: 100%;
  height: 100%;
  max-width: unset;
  max-height: unset;
  padding: 0;
}
.mod-masonry-image-grid dialog::backdrop {
  background: white;
}
.mod-masonry-image-grid dialog .dialog-body {
  height: 100%;
  padding: var(--container-padding-x);
}
.mod-masonry-image-grid dialog .btn-close {
  position: absolute;
  top: calc(var(--container-padding-x)/2);
  right: calc(var(--container-padding-x)/2);
}
.mod-masonry-image-grid dialog .swiper {
  height: 100%;
}
.mod-masonry-image-grid dialog .img {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
}
.mod-masonry-image-grid dialog img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
}
.mod-masonry-image-grid dialog .img-placeholder {
  display: block;
  background-color: var(--color-gray);
  width: auto;
  height: inherit;
  max-width: 100%;
  aspect-ratio: 4/5;
}
.mod-masonry-image-grid dialog .btn-ctrl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.mod-masonry-image-grid dialog .btn-ctrl.prev {
  left: 0;
}
.mod-masonry-image-grid dialog .btn-ctrl.next {
  right: 0;
}