.qu1 {
  display:block;
  width:inherit;
}
.marquee {
  z-index:9;
    width:inherit;
    --gap: 0.5rem;
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
  }

  .marquee__content {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    gap: var(--gap);
    min-width: calc(100% + var(--gap));
    animation: scroll 80s linear infinite;
    list-style-type: none;
    margin:0; padding:0.2rem 0 0.1rem 0;
  }
  
  .marquee img { 
    height:fit-content;
    width:fit-content;
  margin:0; padding:0;
  vertical-align: middle;
  image-rendering:crisp-edges;
  }

  .qu2 {
    width:inherit;
    display: none;
  }
  .marquee2 {
    z-index:9;
      width:inherit;
      --gap: 0.5rem;
      display: none;
      overflow: hidden;
      user-select: none;
      gap: var(--gap);
    }
  
    .marquee__content2 {
      flex-shrink: 0;
      display: none;
      justify-content: space-around;
      gap: var(--gap);
      min-width: calc(100% + var(--gap));
      animation: scroll 75s linear infinite;
      list-style-type: none;
      margin:0; padding:0.2rem 0 0.1rem 0;
      vertical-align: middle;
    }
    
    .marquee2 img {
    display:none;
    height:fit-content;
    width:fit-content;
    margin:0; padding:0;
    vertical-align: middle;
    }

  @media (prefers-reduced-motion: reduce) {
    .qu1 div {
      display: none;
    }
    .marquee2, .marquee__content2 {
      display: flex;
    }
    .qu2 {display:block;}
    .marquee2 img {
      display:inline-block;
    }
        .marquee2:hover .marquee__content2 {
    animation-play-state: paused;
  }
  }
  
  
  @keyframes scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - var(--gap)));
    }
  }
  
  /* Pause on hover */
  .marquee--hover-pause:hover .marquee__content {
    animation-play-state: paused;
  }
  
  .marquee--pos-absolute .marquee__content:last-child {
    position: absolute;
    top: 0;
    left: 0;
  }
  .enable-animation .marquee--pos-absolute .marquee__content:last-child {
    animation-name: scroll-abs;
  }

  @keyframes scroll-abs {
    from {
      transform: translateX(calc(100% + var(--gap)));
    }
    to {
      transform: translateX(0);
    }
  }