.reveal {
    opacity: 0;
    transition: all 0.8s;
}

.reveal.reveal--up {
    transform: translateY(2rem);
}

.reveal.reveal--down {
    transform: translateY(-2rem);
}

.reveal.reveal--left {
    transform: translateX(-2rem);
}

.reveal.reveal--right {
    transform: translateX(2rem);
}

.reveal.reveal--visible {
    opacity: 1;
}

.reveal.reveal--visible.reveal--up,
.reveal.reveal--visible.reveal--down {
    transform: translateY(0);
}

.reveal.reveal--visible.reveal--left,
.reveal.reveal--visible.reveal--right {
    transform: translateX(0);
}