.vb-gallery {
  --vb-cols-desktop: 4;
  --vb-cols-tablet: 3;
  --vb-cols-mobile: 2;
  --vb-gap: 1.5rem;

  display: grid;
  gap: var(--vb-gap);
  grid-template-columns: repeat(var(--vb-cols-desktop), minmax(0, 1fr));
}

/* Tablet */
@media (max-width: 1024px) {
  .vb-gallery {
    grid-template-columns: repeat(var(--vb-cols-tablet), minmax(0, 1fr));
  }
}

/* Mobil */
@media (max-width: 768px) {
  .vb-gallery {
    grid-template-columns: repeat(var(--vb-cols-mobile), minmax(0, 1fr));
  }
}

.vb-gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

/* Ratio-Box: wird nur wirksam, wenn --vb-ratio gesetzt ist */
.vb-gallery__figure {
  margin: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--vb-ratio, auto);
  overflow: hidden;
}

.vb-gallery__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}