.before-after-text__heading {
    margin: 0 0 0.5em;
}

.before-after-text__heading .after-text::before {
    content: '/';
    margin-right: 0.3em;
    margin-left: 0.3em;
}

.before-after-text__items {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 3rem;
    color: var(--wp--preset--color--white);
}

.before-after-text__item {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2.5rem;
}

.before-after-text__item .item-before,
.before-after-text__item .item-after {
    padding: 1.5rem;
}

.before-after-text__item .item-before {
    position: relative;
    background-color: var(--wp--preset--color--blue-xdk);
}

.before-after-text__item .item-after {
    background-color: var(--wp--preset--color--green);
}

.before-after-text__item .item-graphic {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: -1;
    display: block;
    width: 40px;
    height: 33px;
    overflow: clip;
    background: linear-gradient(to right, var(--wp--preset--color--blue-xdk), var(--wp--preset--color--green));
    mask-image: url('data:image/svg+xml,<svg width="119" height="30" viewBox="0 0 119 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M118.414 16.4142C119.195 15.6332 119.195 14.3668 118.414 13.5858L105.686 0.857864C104.905 0.0768156 103.639 0.0768156 102.858 0.857864C102.077 1.63891 102.077 2.90524 102.858 3.68629L114.172 15L102.858 26.3137C102.077 27.0948 102.077 28.3611 102.858 29.1421C103.639 29.9232 104.905 29.9232 105.686 29.1421L118.414 16.4142ZM0 15V17H117V15V13H0V15Z" fill="%23000"/></svg>');
    mask-size: 100px;
    mask-repeat: no-repeat;
    mask-position: 100% 50%;
    /* transform: translate(-50%, 0) rotate(90deg); */
    transition: opacity 0.2s, transform 0.4s;
    transition-delay: 0.4s;
}

/* aniimate */
.before-after-text__item .item-graphic {
    opacity: 0.01;
    transform: translate(-50%, -20px) rotate(90deg);
}

.before-after-text__item[data-io-visible="true"] .item-graphic {
    opacity: 1;
    transform: translate(-50%, 0) rotate(90deg);
}


@media (min-width: 768px) {
    .before-after-text__heading,
    .before-after-text__item {
        display: grid;
        grid-template-columns: 40% auto;
        gap: 2rem 10%;
    }

    .before-after-text__items {
        gap: 2rem;
    }

    .before-after-text__item {
        min-height: 140px;
    }

    .before-after-text__heading .after-text::before {
        display: none;
    }

    .before-after-text__item {
        position: relative;
    }

    .before-after-text__item .item-before {
        position: static;
    }

    .before-after-text__item .item-before,
    .before-after-text__item .item-after {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .before-after-text__item .item-graphic { 
        top: 50%;
        left: 40%;
        width: 9%;
        height: 33px;
        mask-size: 117px;
        mask-position: 100% 50%;
        /* transform: translateY(-50%); */
    }

    /* aniimate */
    .before-after-text__item .item-graphic {
        transform: translate(-30px, -50%);
    }

    .before-after-text__item[data-io-visible="true"] .item-graphic {
        transform: translate(0, -50%);
    }
}

@media (min-width: 900px) {
    .before-after-text__item .item-before,
    .before-after-text__item .item-after {
        padding-right: 2rem;
        padding-left: 2rem;
    }
}