* 
        {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }


        :root 
        {
          --marquee-width: 80vw;
          --marquee-height: 20vh;
/* --marquee-elements: 12; */ /* defined with JavaScript */
          --marquee-elements-displayed: 5;
          --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
          --marquee-animation-duration: calc(var(--marquee-elements) * 3s);
        }

        .marquee 
        {
          width: 100%;
          height: var(--marquee-height);
          background-color: rgb(255, 255, 255);
          color: #eee;
          overflow: hidden;
          position: relative;
        }
        .marquee:before, .marquee:after 
        {
          position: absolute;
          top: 0;
          width: 10rem;
          height: 100%;
          content: "";
          z-index: 1;
        }
        .marquee:before 
        {
          left: 0;
          background: linear-gradient(to right, rgb(255, 255, 255) 0%, transparent 100%);
        }
        .marquee:after 
        {
          right: 0;
          background: linear-gradient(to left, rgb(255, 255, 255) 0%, transparent 100%);
        }
        .marquee-content 
        {
          list-style: none;
          height: 100%;
          display: flex;
          animation: scrolling var(--marquee-animation-duration) linear infinite;
        }
        /*
        .marquee-content:hover 
        {
          animation-play-state: paused;
        } */
        @keyframes scrolling         
        {
          0% 
          { transform: translateX(0); 
          }
          100% 
          { transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements))); 
          }
        }
        .marquee-content li 
        {
          display: flex;
          justify-content: center;
          align-items: center;
          /* text-align: center; */
          flex-shrink: 0;
          width: var(--marquee-element-width);
          max-height: 100%;
          white-space: nowrap;
        }

        .marquee-content li img 
        {
          width:180px;  
        }
        @media (max-width: 1024px) 
        {
          .marquee-content li img 
          {
            width:70%;  
          }
          
        }

        @media (max-width: 600px) 
        {
          :root 
          {
            --marquee-width: 100vw;
            --marquee-height: 16vh;
            --marquee-elements-displayed: 3;
          }
          .marquee:before, .marquee:after 
          { 
            width: 5rem; 
          }
          
        }



        @media (max-width: 912px) 
        {  
          :root
          {    
            --marquee-width: 60vw;    
            --marquee-height: 10vh;
            --marquee-elements-displayed: 3;
          }
          .marquee:before, .marquee:after 
          { 
            width: 5rem; 
          }
        }