:root {
  --num-vis-spons: 7;
  --spons-translate: calc(-100% / var(--num-vis-spons) * 8);
}

.sponsors {
  height: 8vh;
  width: 100vw;
  background-color: black;
  opacity: 0.9;
  position: fixed;
  bottom: 0;
  overflow: hidden;
}

.sponsors-content {
  width: 100%;
  height: 100%;
  display: flex;
  animation: scrolling 20s linear infinite;
}

.sponsors-content:hover{
  animation-play-state: paused;
}

@keyframes scrolling {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(var(--spons-translate));
  }
}

.sponsors-content li {
  list-style: none;
  height: 100%;
  width: calc(100% / var(--num-vis-spons));
  flex-shrink: 0;

  display: grid;
  place-items: center;
}
/* adjust speed and number of visible in responsiveness */

.sponsors .image{
  height: 55%;
  aspect-ratio: 1/1;
  display: grid;
  place-items: center;

}

.sponsors .image img{
  width:100%;
  height: auto;
}