html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.wrapper {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.gallery {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    margin-bottom: 40px;

    
    ul {
        display: flex;
        align-items: flex-end;
        gap:0;
        height: 100%;
        list-style: none;
        margin: 0;
        /* Padding horizontal pour permettre aux items de sortir complètement de la vue */
        padding: 0 50vw;
        width: fit-content;
    }
}

.item {
    height: 70vh;
    width: auto;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    border-radius: 10px;
    scroll-snap-stop: always;
    scroll-snap-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transform-origin: bottom;
    animation: centerAnimation linear backwards;
    animation-timeline: view(0% inline);
    animation-range: entry 0% exit 80%;
    
    /* Espacement entre les items */
    &:not(:first-child) {
        margin-left: -10vw;
    }

    img {
        height: 100%;
        width: auto;
        display: block;
        object-fit: contain;
    }
}

/* .item:hover {
    transform: translateY(50px) scale(1.1);
} */

/* Animation qui se déclenche quand l'item passe au centre */
@keyframes centerAnimation {
    /* Début : l'item entre dans la vue (à gauche) */
    0% {
        transform: translateY(0) scale(0.9);
    }
    
    /* Milieu : l'item est au centre de l'écran */
    50% {
        transform: translateY(-10%) scale(1.1);
    }
    
    /* Fin : l'item sort de la vue (vers la droite) */
    100% {
        transform: translateY(0) scale(0.9);
    }
}