Bespoke Website Solutions

<div class="outer">
    <div>
        <div class="loop"><div class="content"> Make sure you subscribe ✦ Make sure you subscribe ✦ Make sure you subscribe ✦ Make sure you subscribe ✦ Make sure you subscribe ✦ Make sure you subscribe ✦ Make sure you subscribe ✦ Make sure you subscribe ✦</div></div>
    </div>
</div>

.content {
color: #FFF;
font-family: "Clash Grotesk Variable";
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 22.5px; /* 112.5% */
letter-spacing: 1.2px;
text-transform: uppercase;
  padding-left: 0.5em
}

@media only screen and (max-width: 767px) {
    .content {
        font-size: 2rem !important;
        padding-left: 0.25em;
    }
}

.outer {
    overflow: hidden;  !important;
}

.outer div {
    display: inline-block;
}

.loop {
    white-space: nowrap;
    animation: loop-anim 15s linear infinite;
}

@media only screen and (max-width: 767px) {
    .loop {
        animation: loop-anim 3.5s linear infinite;
    }
}

@keyframes loop-anim {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: -50% /* This works because of the div between "outer" and "loop" */
    }
}

document.querySelectorAll('.outer').forEach(el => {
	let content = el.querySelector('.content');

	repeatContent(content, el.offsetWidth);

	let slider = el.querySelector('.loop');
	slider.innerHTML = slider.innerHTML + slider.innerHTML;
});

    
function repeatContent(el, till) {
    let html = el.innerHTML;
    let counter = 0; // prevents infinite loop
    
    while (el.offsetWidth < till && counter < 100) {
        el.innerHTML += html;
        counter += 1;
    }
}