body{
    overflow-x: hidden;
}

main section:first-of-type {
    background-image: url(../images/eindproduct/hero-foto.jpeg);
}

.proces-section{
    width: 100%;
    position: relative;
    min-height: 100vh;
    padding: 0 !important;
    background-image: none !important;
    & h2{
        padding: 6rem 8rem 3rem;
    }
    
}


#sticky-horizontal {
    width: 100%;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;  /* Smooth iOS scrolling */
    scrollbar-width: none;  /* Firefox */
    background-image: url("../images/takje.png");
    background-repeat: no-repeat;
}
#sticky-horizontal::-webkit-scrollbar {
    display: none;
}

#proces-wrapper {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.stap {
    flex: 0 0 100vw;
    scroll-snap-align: start;
    align-self: center;
    height: 100%;
    padding: 0 8em;
    display: grid;
    gap: 3em;
    grid-template-columns: 2fr 3fr;
    & h3{
        grid-column: 2;
        align-self: end;
    }
    & p{
        grid-column: 2;
        grid-row: 2;
    }
    & img{
        grid-column: 1;
        grid-row: 1/3;
        align-self: center;
    }

}

.twee-images{
    grid-template-columns: 3fr 3fr 5fr;
    column-gap: 1.5em;
    & h3{
        grid-column: 3;
    }
    & p{
        grid-column: 3;
    }
    & img{
        object-fit: fill;
    }
    & img:nth-of-type(2){
        grid-column: 2 !important;
    }
}

@keyframes horizontalscroll{
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-1rem);
    }
}

section:nth-of-type(3){
    & .resultaat-div-section{
        place-self: center;
        display: grid;
        gap: 2em;
        grid-template-columns: 1fr 1fr;
        width: 65vw;
        & h2, > img{
            grid-column: 1/3;
            justify-self: center;
        }
        & .image-container{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 1.5em;
        }
        & p{
            align-self: center;
            text-align: justify;
        }
    }
    
}