/* Escopo apenas para o banner do meio */

/* Desktop: manter configuração atual */
@media (min-width: 769px) {
  .br-carousel.banner-meio {
    min-height: 336px !important;
    max-height: 200px !important;
    width: 100%; /* Full width instead of 80% */
  }

  .br-carousel.banner-meio,
  .br-carousel.banner-meio .carousel-stage,
  .br-carousel.banner-meio .carousel-content {
    width: 100%;
  }

  .br-carousel.banner-meio .carousel-content img {
    display: block;
    object-fit: cover;
  }
}

/* Mobile/Tablet: usar mesmas configurações do banner topo */
@media (max-width: 768px) {
  .br-carousel.banner-meio {
    width: 100%;
    min-height: 0 !important;
    max-height: none !important;
    height: auto;
    position: relative;
  }

  .br-carousel.banner-meio .carousel-stage,
  .br-carousel.banner-meio .carousel-page,
  .br-carousel.banner-meio .carousel-content {
    height: 100%;
  }

  .br-carousel.banner-meio .carousel-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: flex;
  }

  /* Esconder paginação no mobile para reduzir altura */
  .br-carousel.banner-meio .carousel-step {
    display: none;
  }
}

/* Fallback para navegadores sem suporte a aspect-ratio */
@supports not (aspect-ratio: 1) {
  @media (max-width: 768px) {
    .br-carousel.banner-meio {
      width: 100%;
      height: calc(100vw * (231 / 1280)); /* Reduced from 330 to 231 */
    }
  }
}