/* ===== Caption com cores através de CSS vars ===== */
.bootstrap-mosaic-gallery .caption-content {
  /* Valores padrão, sobrescritos via --bm-caption-* */
  background-color: var(--bm-caption-bg, rgba(0,0,0,.75));
  color: var(--bm-caption-text, #fff);
  border-style: solid;
  border-color: var(--bm-caption-bd, transparent);
}

/* ===== Grid responsivo + ratio: telas pequenas sem distorção ===== */
.bootstrap-mosaic-gallery .mosaic-grid {
  display: grid;
  gap: 1rem;
  grid-auto-flow: dense;
  grid-template-columns: repeat(var(--bm-columns, auto-fit), minmax(180px, 1fr));
  grid-auto-rows: 160px;
}

/* Mantém proporção quando houver classes ratio-*, senão imagem cobre (cover) */
.img-wrapper { width: 100%; height: 100%; position: relative; overflow: hidden; }
.img-wrapper img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* Proporções */
.ratio-1x1  { aspect-ratio: 1 / 1; }
.ratio-4x3  { aspect-ratio: 4 / 3; }
.ratio-3x2  { aspect-ratio: 3 / 2; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-9x16 { aspect-ratio: 9 / 16; }

/* Spans */
.mosaic-item { position: relative; }
.span-col-2 { grid-column: span 2 / auto; }
.span-row-2 { grid-row: span 2 / auto; }

/* Medium+ */
@media (min-width: 768px) {
  .bootstrap-mosaic-gallery .mosaic-grid {
    grid-template-columns: repeat(var(--bm-columns, auto-fit), minmax(200px, 1fr));
    grid-auto-rows: 200px;
  }
}
@media (min-width: 1200px) {
  .bootstrap-mosaic-gallery .mosaic-grid {
    grid-template-columns: repeat(var(--bm-columns, auto-fit), minmax(240px, 1fr));
    grid-auto-rows: 220px;
  }
}

/* ===== Fix para telas pequenas: NÃO forçar altura fixa, evita “distorção” ===== */
@media (max-width: 575.98px) {
  .bootstrap-mosaic-gallery .mosaic-grid {
    grid-auto-rows: auto;           /* Altura passa a ser definida pela proporção */
  }
  .bootstrap-mosaic-gallery .mosaic-grid .img-wrapper.ratio-1x1,
  .bootstrap-mosaic-gallery .mosaic-grid .img-wrapper.ratio-4x3,
  .bootstrap-mosaic-gallery .mosaic-grid .img-wrapper.ratio-3x2,
  .bootstrap-mosaic-gallery .mosaic-grid .img-wrapper.ratio-16x9,
  .bootstrap-mosaic-gallery .mosaic-grid .img-wrapper.ratio-9x16 {
    aspect-ratio: auto;             /* Libera o conteúdo para ocupar altura natural */
  }
  /* Em linhas (2/3/N por linha), não force altura */
  .bootstrap-mosaic-gallery .mosaic-rows .row > [class*="col"] .img-wrapper {
    height: auto;
  }
}

/* ===== “N por linha” ===== */
.bootstrap-mosaic-gallery .mosaic-rows .row > [class*="col"] .img-wrapper {
  height: 200px;
}