/* Configuração do container do slider */
.slider-container {
    width: 60%;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
}

/* Configuração do slider */
.slider {
    display: flex;
    gap: 8px; /* Define a distância entre as imagens */
    width: calc(100% * 4 + 8px * 3); /* Largura do conjunto de 4 imagens */
    animation: slide 20s linear infinite;
}

.slider img {
    width: 5%; /* Define para que cada imagem ocupe um quarto do container */
    height: auto;
}

/* Animação para o loop */
@keyframes slide {
    0% { transform: translateX(0); }
    10% { transform: translateX(-10%); }
    20% { transform: translateX(-20%); }
    30% { transform: translateX(-30%); }
    40% { transform: translateX(-40); }
    50% { transform: translateX(-50%); }
    60% { transform: translateX(-60%); }
    70% { transform: translateX(-70%); }
    80% { transform: translateX(0); }
}