.mbg-wrap { width: 100%; }

.mbg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.mbg-item {
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

/* Wichtig: Element mit Animation clippt den Radius */
.mbg-media {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Lightbox Link füllt den kompletten Bildbereich */
.mbg-lightbox-link {
  display: block;
  width: 100%;
  height: 100%;
}

.mbg-media img,
.mbg-lightbox-link img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Default; wird durch Elementor-Control überschrieben */
  object-position: center center; /* Default; wird durch Elementor-Control überschrieben */
  display: block;
  cursor: zoom-in;
}

/* Overlay */
.mbg-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.25;
  transition: opacity .2s ease;
  pointer-events: none;
  border-radius: inherit;
}

.mbg-item:hover .mbg-overlay { opacity: 0.35; }

/* Titel */
.mbg-title {
  z-index: 3;
  position: relative;
}

/* Titel als Overlay im Bild */
.mbg-title--overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

/* Titel unter dem Bild */
.mbg-title--below {
  margin-top: 8px;
}