.container

body {
    overflow: hidden;
}

.container {
    width: 10000px;
    height: 100vh;
    background: linear-gradient(to right, #FCB48D 0%, #FCB48D 20%, #FCA17D 20%, #FCA17D 40%, #DA627D 40%, #DA627D 60%, #9A348E 60%, #9A348E 80%, #782B7F 80%, #782B7F 100%);
    background-size: 100vw 500px;
}

const container = document.querySelector('.container');
let offset = 0;

window.addEventListener('wheel', (e) => {
    offset += Math.sign(e.deltaY) * 60;

    if (offset < 0) {
        offset = 0;
    } else if (offset > 10000 - window.innerWidth) {
        offset = 10000 - window.innerWidth;
    }
    
    container.style.transform = `translateX(-${offset}px`;
});