html.js [data-scroll-reveal] {
    opacity: 0;
    translate: 0 42px;
    transition:
        opacity .82s ease-out,
        translate .88s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--scroll-reveal-delay, 0ms);
    will-change: opacity, translate;
}

html.js [data-scroll-reveal="left"] {
    translate: -40px 0;
}

html.js [data-scroll-reveal="right"] {
    translate: 40px 0;
}

html.js [data-scroll-reveal].is-scroll-visible {
    opacity: 1;
    translate: 0 0;
    will-change: auto;
}

@media (max-width: 640px) {
    html.js [data-scroll-reveal] {
        translate: 0 24px;
        transition-duration: .65s;
    }

    html.js [data-scroll-reveal="left"],
    html.js [data-scroll-reveal="right"] {
        translate: 0 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.js [data-scroll-reveal],
    html.js [data-scroll-reveal="left"],
    html.js [data-scroll-reveal="right"] {
        opacity: 1;
        translate: none;
        transition: none;
    }
}