.twm-slogan {
    display: flex;
    align-items: center;
    padding: 20px 0;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.twm-slogan__base {
    display: inline-block;
    white-space: nowrap;
    height: 20px;
    line-height: 1.1em;
}

.twm-slogan__highlight {
    font-weight: 700;
    color: red;
}

.twm-slogan__dynamic-words {
    position: relative;
    height: 20px;
    overflow: hidden;
    display: inline-block;
    margin-left: 5px;
    width: 100%;
    line-height: 1.1em;
}

.twm-slogan__dynamic-word {
    position: absolute;
    width: 100%;
    opacity: 0;
    white-space: nowrap;
}

/* 2 words */
.twm-slogan--count-2 .twm-slogan__dynamic-word {
    animation: scroll-2 3s linear infinite;
}

.twm-slogan--count-2 .twm-slogan__dynamic-word-1 {
    animation-delay: 0s !important;
}

.twm-slogan--count-2 .twm-slogan__dynamic-word-2 {
    animation-delay: 1.5s !important;
}

@keyframes scroll-2 {
    0%, 50%, 100% {
        transform: translateY(100%);
        opacity: 0;
    }
    10%, 40% {
        transform: translateY(0);
        opacity: 1;
    }
    45% {
        transform: translateY(-100%);
        opacity: 0;
    }
}

/* 3 words */
.twm-slogan--count-3 .twm-slogan__dynamic-word {
    animation: scroll-3 4.5s linear infinite;
}

.twm-slogan--count-3 .twm-slogan__dynamic-word-1 {
    animation-delay: 0s !important;
}

.twm-slogan--count-3 .twm-slogan__dynamic-word-2 {
    animation-delay: 1.5s !important;
}

.twm-slogan--count-3 .twm-slogan__dynamic-word-3 {
    animation-delay: 3s !important;
}

@keyframes scroll-3 {
    0%, 33%, 100% {
        transform: translateY(100%);
        opacity: 0;
    }
    10%, 25% {
        transform: translateY(0);
        opacity: 1;
    }
    30%, 90% {
        transform: translateY(-100%);
        opacity: 0;
    }
}

/* 4 words */
.twm-slogan--count-4 .twm-slogan__dynamic-word {
    animation: scroll-4 6s linear infinite;
}

.twm-slogan--count-4 .twm-slogan__dynamic-word-1 {
    animation-delay: 0s !important;
}

.twm-slogan--count-4 .twm-slogan__dynamic-word-2 {
    animation-delay: 1.5s !important;
}

.twm-slogan--count-4 .twm-slogan__dynamic-word-3 {
    animation-delay: 3s !important;
}

.twm-slogan--count-4 .twm-slogan__dynamic-word-4 {
    animation-delay: 4.5s !important;
}

@keyframes scroll-4 {
    0%, 25%, 100% {
        transform: translateY(100%);
        opacity: 0;
    }
    10%, 20% {
        transform: translateY(0);
        opacity: 1;
    }
    22.5%, 90% {
        transform: translateY(-100%);
        opacity: 0;
    }
}

/* 5 words */
.twm-slogan--count-5 .twm-slogan__dynamic-word {
    animation: scroll-5 7.5s linear infinite;
}

.twm-slogan--count-5 .twm-slogan__dynamic-word-1 {
    animation-delay: 0s !important;
}

.twm-slogan--count-5 .twm-slogan__dynamic-word-2 {
    animation-delay: 1.5s !important;
}

.twm-slogan--count-5 .twm-slogan__dynamic-word-3 {
    animation-delay: 3s !important;
}

.twm-slogan--count-5 .twm-slogan__dynamic-word-4 {
    animation-delay: 4.5s !important;
}

.twm-slogan--count-5 .twm-slogan__dynamic-word-5 {
    animation-delay: 6s !important;
}

@keyframes scroll-5 {
    0%, 20%, 100% {
        transform: translateY(100%);
        opacity: 0;
    }
    10%, 18% {
        transform: translateY(0);
        opacity: 1;
    }
    19%, 90% {
        transform: translateY(-100%);
        opacity: 0;
    }
}