.parallax-window {
    position: relative;
    overflow: hidden;
    height: var(--window-height, 300px);
    width: 100%;
}

.parallax-window.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-position: 50% var(--parallax-pos, 50%);
}

.layer-1 {
    opacity: 1;
}

.layer-2 {
    opacity: 0;
    transition: opacity 400ms ease;
}

.parallax-window:hover .layer-2 {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .parallax-window {
        --parallax-pos: 0%;
    }

    .layer-2 {
        transition-duration: 0ms;
    }
}