:root {
    --replace-offset: 0%;
    --replace-offset-2: calc((100% - var(--replace-offset) ) * -1);
}

.js-replace {
    display: grid;
}

.js-replace__item {
    grid-row: -1 / 1;
    grid-column: -1 / 1;
    overflow: hidden;
    will-change: transform;
}

/* item to replace with */
.js-replace__item {
    transform: translateY(calc(var(--replace-offset) * 1));
}
.js-replace__content {
    /* fixes problem with calculating correct height in js */
    border: 1px solid transparent;
    will-change: transform;

    transform: translateY(calc(var(--replace-offset) * -1));
}

/* previous replace item*/
.js-replace__item--active {
    transform: translateY(calc(var(--replace-offset-2) * 1));
}
.js-replace__item--active .js-replace__content {
    transform: translateY(calc(var(--replace-offset-2) * -1));
}


/* REVERSE ANIMATION */
.js-replace--reverse
.js-replace__item {
    transform: translateY(calc(var(--replace-offset-2) * 1));
}
.js-replace--reverse
.js-replace__content {
    transform: translateY(calc(var(--replace-offset-2) * -1));
}

/* previous replace item*/
.js-replace--reverse
.js-replace__item--active {
    transform: translateY(calc(var(--replace-offset) * 1));
}
.js-replace--reverse
.js-replace__item--active .js-replace__content {
    transform: translateY(calc(var(--replace-offset) * -1));
}