/* Ajuste simples para alinhar os 3 mini banners */
.row-fluid.mini-banner {
  display: flex !important;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.row-fluid.mini-banner .carousel-inner, 
.row-fluid.mini-banner .carousel-item, 
.row-fluid.mini-banner .banner-wrapper {
  flex: 1 0 calc(33.333% - 10px) !important;
  max-width: calc(33.333% - 10px) !important;
  margin: 0 5px !important;
}

@media (max-width: 768px) {
  .row-fluid.mini-banner {
    display: block !important;
  }
  .row-fluid.mini-banner .carousel-inner, 
  .row-fluid.mini-banner .carousel-item, 
  .row-fluid.mini-banner .banner-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 !important;
  }
/* Container flex para os mini banners */
.row-fluid.mini-banner {
  display: flex !important;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  padding: 0;
  margin: 0;
  gap: 10px; /* controla a distância entre os banners */
}

/* Estilo de cada banner individual */
.row-fluid.mini-banner > div {
  flex: 1 1 0%;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

/* Mobile: banners em coluna */
@media (max-width: 768px) {
  .row-fluid.mini-banner {
    display: block !important;
  }
  .row-fluid.mini-banner > div {
    width: 100% !important;
    margin: 10px 0 !important;
  }
}