First marquee

<div class="marquee">
    <div class="marquee__group">
      <span>hello there ➺</span>
     <span>hello there ➺</span>
     <span>hello there ➺</span>
      
    </div>
  <div class="marquee__group" aria-hidden="true">
      <span>hello there ➺</span>
     <span>hello there ➺</span>
     <span>hello there ➺</span>
      
    </div>
</div>

.marquee {
  display: flex;
  overflow: hidden;
  height: 10vh;
  user-select: none;
  gap: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
/*background-color: green;*/
   /*transform: skewY(-3deg); */
   /*transform: rotate(-5deg) translateY(-30px) translateX(50px);*/
}

.marquee:hover {
  -webkit-text-stroke: 1.5px #fff;
	text-stroke: 1.5px #fff;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
	color: transparent;
	transition: all 0.5s ease;
	-webkit-font-smoothing: antialiased;
	/*-moz-osx-font-smoothing: grayscale;*/

}

.marquee__group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-width: 100%;
  animation: scroll 15s linear infinite reverse;
}

.marquee__group span {
  color: white;
  font-size: 5vw;
  font-weight: 800;
  white-space: nowrap;
  font-family: 'Syne', sans-serif !important;
  /*text-transform: uppercase;*/
  
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 2rem));
  }
}

@media only screen and (min-width: 360px) {
    .marquee__group span {
        font-size: 6.5vw;
    }
}

Second marquee

<div class="marquee__three marquee--hover-pause">
  <div class="marquee__group__three">
    <img src='add your own link' alt=''>
    <img src='add your own link' alt=''>
    <img src='add your own link' alt=''>
  </div>

  <div aria-hidden="true" class="marquee__group__three">
    <div class="marquee__group__three">
    <img src='add your own link' alt=''>
    <img src='add your own link' alt=''>
    <img src='add your own link' alt=''>
  </div>
  </div>
</div>

.marquee__three {
  display: flex;
  overflow: hidden;
  height: 68vh;
  user-select: none;
  gap: .1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  /*transform: rotate(-5deg) translateY(-100px) translateX(50px);*/
  /*animation: scroll 18s linear infinite;*/
  /*background-color: green;*/
   /*transform: skewY(-8deg); */
    /*-webkit-mask-image:radial-gradient(rgba(0, 0, 0,1) 15%, transparent 68%);*/
    /*mask-image: linear-gradient(transparent, black 10%, black 70%, transparent 100%);*/
   
}

.marquee--hover-pause:hover .marquee__group__three {
  animation-play-state: paused;
}

.marquee__group__three {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  /*justify-content: space-between;*/
  gap: .1rem;
  min-width: 100%;
  animation: scroll 30s linear infinite reverse;
}

.marquee__group__three img:hover {
   	transition: all 0.5s ease-in-out;
    /*transform: skewY(-8deg);*/
    transform: scale(1.1);
    background-color: #c1532f;
    object-fit: cover;
    aspect-ratio: 1;
    border-radius: 50%;
    will-change: transform;
    margin-top: 1rem;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - .1rem));
  }
}