.logoslider {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  background-color: white;
}

:root {
  --animationSpeed: 20s;
  /* Adjust this to change the speed of the scroll */
}

@keyframes scroll-left {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(calc(-250px * 7));
    }
  }

  @keyframes scroll-right {
    0% {
      transform: translateX(calc(-250px * 7));
    }

    100% {
      transform: translateX(0);
    }
  }

  .slider {
    height: 150px;
    overflow: hidden;
    position: relative;
    width: 100%;

    margin-bottom: 20px;
  }

  .slide-track {
    display: flex;
    width: calc(250px * 14);
    /* width for two sets of slides */
    animation: scroll-left var(--animationSpeed) linear infinite;
  }

  .slide-track-reverse {
    display: flex;
    width: calc(250px * 14);
    /* width for two sets of slides */
    animation: scroll-right var(--animationSpeed) linear infinite;
  }

  .slide {
    height: 100px;
    width: 250px;
    flex-shrink: 0;
    /* Prevents flex items from shrinking */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    padding: 10px;
    box-sizing: border-box;
  }

  .slide img {
    max-width: 150px;
    max-height: 150px;
  }