<style>
  .down, .up {
    --column-height: 500px;
    --image-height: 200px;
    --row-gap: 10px;
    --num-images: 5;

    height: var(--column-height);
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 20%, black 80%, rgba(0, 0, 0, 0) 100%);
  }

  .scroll-container {
    display: flex;
    flex-direction: column;
  }

  .up .scroll-container {
    animation: imagescrolling 15s linear infinite alternate;
    animation-delay: -0.1s; /* Offset to ensure it starts halfway through the cycle */
  }

  .down .scroll-container {
    animation: imagescrolling2 15s linear infinite alternate;
  }

  .scroll-container img {
    height: var(--image-height);
    width: 100%;
    margin-bottom: var(--row-gap);
    padding: 0;
    object-fit: cover;
  }

  @keyframes imagescrolling {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(calc(
        -1 * (((var(--image-height) + var(--row-gap)) * var(--num-images)) - var(--column-height))
      ));
    }
  }

  @keyframes imagescrolling2 {
    0% {
      transform: translateY(calc(
        -1 * (((var(--image-height) + var(--row-gap)) * var(--num-images)) - var(--column-height))
      ));
    }
    100% {
      transform: translateY(0);
    }
  }
</style>