/* Created with code from https://stackoverflow.com/questions/56639772/how-to-create-a-marquee-that-appears-infinite-using-css-or-javascript */
.marquee {
    width: 100%;
    min-width: 690px;

    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}

.marquee-content {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    width: max-content;
}

.marquee-content img {
    display: block;
    margin: 0;
    padding: 0;

    flex-shrink: 0;
    width: auto;
}

#top-banner {
    animation: scroll-marquee-left 20s linear infinite;
}
#bottom-banner {
    animation: scroll-marquee-right 20s linear infinite;
}

@keyframes scroll-marquee-left {
0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(var(--img-width));
  }
}

@keyframes scroll-marquee-right {
0% {
    transform: translateX(var(--img-width));
  }
  100% {
    transform: translateX(0);
  }
}