/* 1. O Contêiner Principal */
.spinner-carousel-container {
    max-width: 90%; /* Responsividade: 90% da largura do pai */
    margin: 0 auto;
    overflow: hidden; /* **ESCONDE** os itens que estão fora da tela */
    border-radius: 8px;
}

/* 2. A Pista/Trilha do Carrossel */
.spinner-carousel-track {
    display: flex; /* Flexbox para organizar os itens em linha */
    width: fit-content; /* O jQuery ajustará isso dinamicamente */
    transition: transform 0.5s ease-in-out; /* Suaviza a transição da mudança de slide */
    
    /* Prepara para a animação JS */
    will-change: transform; 
}

/* 3. O Item Individual (Depoimento) */
.spinner-carousel-item {
    min-width: 300px; /* Largura padrão para desktop */
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
    text-decoration: none; /* Remove sublinhado do link */
    color: #333;
    cursor: pointer;
    display: block;
}

.spinner-carousel-item img {
    /*width: 100%; */
    height: 300px;
    /*height: auto;*/
    border-radius: 4px;
    margin-bottom: 10px;
}
.spinner-carousel-item p {
    text-align: center;
}

/* Estilo ao passar o mouse */
.spinner-carousel-item:hover {
    transition: background-color 0.2s;
}

/* Responsividade (Ajustes para Celular) */
@media (max-width: 600px) {
    .spinner-carousel-item {
        min-width: 80vw; /* Ocupa 80% da largura da viewport no celular */
        padding: 10px;
    }
}