.premium-carousel-container {
    width: 100%;
    margin: 2rem auto;
    max-width: 1200px;
    padding: 0 1rem;
    box-sizing: border-box;
}

.premium-carousel {
    position: relative;
    width: 100%;
    /* Altura reduzida para 150px */
    height: var(--carousel-height, 150px); 
    overflow: hidden;
    background: transparent; 
}

.premium-carousel-track {
    display: flex;
    height: 100%;
    will-change: transform;
    align-items: center; 
    padding: 10px 0; 
}

.premium-carousel-slide {
    /* Define o tamanho em quadrados exatos de 150px conforme solicitado */
    height: 150px;
    min-width: 150px;
    flex: 0 0 150px;
    position: relative;
    overflow: hidden;
    padding: 0 10px; /* Um pequeno espaçamento lateral entre as imagens */
    box-sizing: border-box;
}

.premium-carousel-slide img {
    width: 100%;
    height: 100%;
    /* object-fit cover manterá qualquer imagem quadrada sem achatar. Se forem marcas/logos puros, pode substituir para 'contain' */
    object-fit: cover; 
    border-radius: 12px;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* Sombra mais delicada ajustada ao novo tamanho */
    
    /* Efeito de filtro para deixar imagens Preto e Branco */
    filter: grayscale(100%) contrast(1.1); 
    transition: filter 0.4s ease, transform 0.4s ease, opacity 0.3s;
    opacity: 0.85; /* Uma opacidade suave pro background ficar mais clean */
}

/* Toque Premium Adicional: Ao passar o mouse, a imagem ganha vida com cor, fica 100% visível e dá um zoom delicado! */
.premium-carousel-slide:hover img {
    filter: grayscale(0%) contrast(1);
    transform: scale(1.05);
    opacity: 1;
}

/* Responsividade agora é mais direta: como são caixas fixas pequenas (150px),
   elas se organizam automaticamente em número variável sem as larguras em % */
@media (max-width: 800px) {
    .premium-carousel {
        height: min(var(--carousel-height, 150px), 150px);
    }
}

@media (max-width: 480px) {
    .premium-carousel {
        height: min(var(--carousel-height, 150px), 150px);
    }
    .premium-carousel-slide {
        padding: 0 6px; /* Apenas diminui o fresta entre as imagens quando for vista celular para caberem mais na tela */
    }
}