.image-gallery {
  --gallery-columns: 3;
  --gallery-gap: clamp(8px, 2cqw, 20px);
}
.image-gallery__caption {
  font-size: var(--font-size-20);
  margin-top: 1em;
  color: var(--color-main);
}
.image-gallery--grid {
  display: grid;
  grid-template-columns: repeat(var(--gallery-columns), 1fr);
  gap: var(--gallery-gap);
}
.image-gallery--grid .image-gallery__item {
  overflow: hidden;
  border-radius: var(--border-radius, 4px);
}
.image-gallery--grid .image-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.image-gallery--grid .image-gallery__item:hover img {
  transform: scale(1.04);
}
.image-gallery--masonry {
  column-count: var(--gallery-columns);
  column-gap: var(--gallery-gap);
}
.image-gallery--masonry .image-gallery__item {
  break-inside: avoid;
  margin-bottom: var(--gallery-gap);
  overflow: hidden;
  border-radius: var(--border-radius, 4px);
}
.image-gallery--masonry .image-gallery__item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}
.image-gallery--masonry .image-gallery__item:hover img {
  transform: scale(1.04);
}
.image-gallery--columns-1 {
  --gallery-columns: 1;
}
.image-gallery--columns-2 {
  --gallery-columns: 2;
}
.image-gallery--columns-3 {
  --gallery-columns: 3;
}
.image-gallery--columns-4 {
  --gallery-columns: 4;
}
.image-gallery--columns-5 {
  --gallery-columns: 5;
}
.image-gallery--columns-6 {
  --gallery-columns: 6;
}
.image-gallery--slider {
  margin-left: calc(var(--padding-on-side) * -1);
  margin-right: calc(var(--padding-on-side) * -1);
}
.image-gallery--slider .image-gallery__viewport {
  overflow: hidden;
}
.image-gallery--slider .image-gallery__container {
  display: flex;
}
.image-gallery--slider .image-gallery__slide {
  flex: 0 0 auto;
  padding: 0 clamp(0.5em, 1cqw, 1em);
  min-width: 0;
  opacity: 1 !important;
}
.image-gallery--slider .image-gallery__slide-inner img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  display: block;
  border-radius: var(--border-radius);
}
@media screen and (max-width: 1024px) {
  .image-gallery--slider .image-gallery__slide-inner img {
    max-height: 320px;
  }
}
@media screen and (max-width: 768px) {
  .image-gallery--slider .image-gallery__slide-inner img {
    max-height: 240px;
  }
}