Infinite Marquee Text

				
					<div class="marquee">

    <div class="marquee__group">
      <span>New York</span>
      <span>Philadelphia</span>
      <span>Boston</span>
      <span>Miami</span>
      <span>Washington D.C.</span>
      <span>Orlando</span>
      <span></span>
    </div>
    
<!--need 2 groups and it should be identical-->
    
  <div class="marquee__group" aria-hidden="true">  to the previous list
      <span>New York</span>
      <span>Philadelphia</span>
      <span>Boston</span>
      <span>Miami</span>
      <span>Washington D.C.</span>
      <span>Orlando</span>
      <span></span>
    </div>

</div>

-----------------------------------------------------------------------------------

<style>
	.marquee {
		display: flex;
		overflow: hidden;
		height: 9vh;
		user-select: none;
		gap: 2rem; /* if you change this value... */
	}

	.marquee__group {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 2rem; /* change this also  */
		min-width: 100%;
		animation: scroll 20s linear infinite /* reverse */; /* If you want to reverse the flow - add or uncomment reverse here */
	}

	.marquee__group span {
		color: #00000000;
		font-size: 4.5rem;
		font-weight: 400;
		white-space: nowrap;
		font-family: 'Bebas Neue', sans-serif !important;
		-webkit-text-stroke-width: 1px; 
		stroke-width: 1px; 
		-webkit-text-stroke-color: #132238;
		stroke: #132238;
	}

	@keyframes scroll {
		from {
			transform: translateX(0);
		}
		to {
			transform: translateX(calc(-100% - 2rem)); /* and this but the 2rem only part, it will be like transform: translateX(calc(-100% - newvaluegoeshere))*/ 
		}
	}
    
</style>