.slide-container{
    width: 100vw;
    height: 500px; 
    margin-top: 200px;
    overflow: hidden;
    position: relative;
}

.image-container{
    width: 300vw; /* 3 imagens */
    height: 500px;
    display: flex;
    animation: slideAnimation 9s infinite ease-in-out;
}

.slider-image{

    
    
    object-fit: cover;
}

/* PAUSAR AO HOVER NOS BOTÕES */
.button-container:hover ~ .image-container{
    animation-play-state: paused;
}

.button-container{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.slider-button{
    opacity: 0;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: pink;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.slider-button:hover{
    background-color: purple;
}

/* TARGET */
#slider-image1:target ~ .image-container{
    animation: none;
    transform: translateX(0);
}

#slider-image2:target ~ .image-container{
    animation: none;
    transform: translateX(-100vw);
}

#slider-image3:target ~ .image-container{
    animation: none;
    transform: translateX(-200vw);
}

/* ANIMAÇÃO */
@keyframes slideAnimation{
    0%{transform: translateX(0);}
    33.33%{transform: translateX(-100vw);}
    66.66%{transform: translateX(-200vw);}
    100%{transform: translateX(0);}
}

/* Permite spans receberem target */
span[id^="slider-image"]{
    position: absolute;
    top: -100px; /* fora da tela */
}

@media (max-width: 600px) {

    .slide-container{
        width: 1100vw;
        height: 150px;      /* reduz altura */
        margin-top: 300px;   /* menos espaço no topo */
    }

    .image-container{
        width: 300vw;
        height: 150px;     /* acompanha a altura do container */
    }

    .slider-image{
        width: 50vw;
        height: 150px;
        object-fit: cover;
    }

    .button-container{
        bottom: 10px;        /* aproxima dos botões */
        gap: 6px;
    }

    .slider-button{
        height: 10px;
        width: 10px;
        opacity: 0;          /* mostra os botões no celular */
    }

    /* Altera também os targets para manter a proporção */
    #slider-image2:target ~ .image-container{
        transform: translateX(-100vw);
    }

    #slider-image3:target ~ .image-container{
        transform: translateX(-200vw);
    }
}