/***********************************************
 * CONTENT-GALLERY
 * Grid-Galerie (Default)
 * Varianten: cols-1 bis cols-4
 ***********************************************/

/* UL als Grid */
.content-gallery ul {
  display: grid;
  grid-template-columns: repeat(var(--ms-gallery-cols, 4), 1fr);
  gap: var(--ms-space-4);
  list-style: none;
  padding: 0;
  margin: var(--ms-space-5) 0;
  width: 100%;
}

/* LI-Reset */
.content-gallery li {
  margin: 0;
  padding: 0;
}

/* Figure als Bild-Container */
.content-gallery li figure {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--ms-radius);
}

/* Bild */
.content-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

/* Hover-Effekt (Default) */
.content-gallery li:hover img,
.content-gallery li:focus-within img {
  transform: scale(1.1);
}

/* Figcaption nur innerhalb der Galerie */
.content-gallery figcaption {
  padding: var(--ms-space-2) 0;
  font-size: var(--ms-font-size-sm);
  color: var(--ms-dark);
}

/* Spalten-Varianten */
.content-gallery--cols-1 > ul { --ms-gallery-cols: 1; }
.content-gallery--cols-2 > ul { --ms-gallery-cols: 2; }
.content-gallery--cols-3 > ul { --ms-gallery-cols: 3; }
.content-gallery--cols-4 > ul { --ms-gallery-cols: 4; }

/* Motion-Reduction */
@media (prefers-reduced-motion: reduce) {
  .content-gallery img {
    transition: none !important;
  }
}