.words-animation h1, .words-animation h2, .words-animation h3, .words-animation h4, .words-animation h5, .words-animation h6 {
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 3px;
    height: 70px;
    overflow: hidden;
    position: relative;
}
.words-animation .left,
.words-animation .right{
    position: relative;
    overflow: hidden;
    width: 43%;
    height: 100%;
    display: flex;
}
.words-animation>h2>img {margin: 0;width: auto;margin: 0 1%;aspect-ratio: 16 / 12;}
.words-animation .left span,
.words-animation .right span{
    position: absolute;
    top: 50%;
    width: 100%;
    transition: .8s ease;
    opacity: 0;
    transform: translateY(-50%);
}

.words-animation .left span{
    text-align: right;
}

.words-animation .left span.active,
.words-animation .right span.active{
    transform: translateX(0) translateY(-50%);
    opacity: 1;
}

/* LEFT */
.words-animation .left span.enter{
    transform: translateX(-100%) translateY(-50%);
}

.words-animation .left span.leave{
    transform: translateX(100%) translateY(-50%);
}

/* RIGHT */
.words-animation .right span.enter{
    transform: translateX(100%) translateY(-50%);
}

.words-animation .right span.leave{
    transform: translateX(-100%) translateY(-50%);
}
.words-animation h2 span {
    font-size: 26px;
}
.words-animation h1 span {
    font-size: 36px;
}

@media screen and (max-width: 768px){
    .words-animation h2 {
        flex-direction: column;
        height: 127px;
    }
    .words-animation .left, .words-animation .right {
        width: 100%;
    }
    .words-animation span {
        text-align: center !important;
    }
    .words-animation h2 img {
        height: 65px !important;
        margin: 7px 0 !important;
        width: 60px;
    }
}