.container {
  --s: 150px; /* size of the logo */
  --d: 20s; /* animation duration*/
  --n: 4; /* number of visible logos */
  
  display: flex;
  overflow: hidden;
}

img {
  width: var(--s);
  offset: shape(from calc(var(--s)/-2) 50%,hline by calc(sibling-count()*max(100%/var(--n),var(--s) + 10px)));
  animation: x var(--d) linear infinite calc(-1*sibling-index()*var(--d)/sibling-count());
}
@keyframes x { 
  to {offset-distance: 100%}
}


/* extra styles */
.container {
  border: 1px solid;
  padding-block: 5px;
  margin: 20px auto;
}
:nth-child(2 of .container) img {
  animation-direction: reverse;
}
body {
  background: #ffefd5;
}


/* attempt at centering two scrollboxes */

.parent-container {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically */
      height: 50vh;     /* Example: Makes container fill the full screen height */
}

.centered-container {
  /* Add other styles for your container (e.g., width, background, padding) */
  width: 200px;
  padding: 20px;
  background-color: #f0f0f0;
}