body {
}


.img2
          {      
            background: #00ca62;
            height: 30em;
            display: flex;
            align-items: center;
            justify-content: center;
          }
   
     .marquee 
         {
            margin: 0 auto;
            width: 100%;
            height: 300px;
            white-space: nowrap;
            overflow: hidden;
            box-sizing: border-box;
            position: relative;
            &:before, &:after 
                    {
                    position: absolute;
                    top: 0;
                    width: 350px;
                    height: 150px;
                    content: "";
                    z-index: 1;
                    }
                        &:before 
                                {
                                left: 0;
                                background: linear-gradient(to right, white 5%, transparent 100%);
                                }
                        &:after 
                                {
                                right: 0;
                                background: linear-gradient(to left, white 5%, transparent 100%);
                                }
                    }

    .marquee-content 
              {
                width: 100%;
                display: flex;
                line-height: 30px;
                animation: marquee 10s linear infinite forwards;
                }

  .marquee-content:hover
            {
                  animation-play-state: paused;
            } 
  
  
  .list-inline 
            {
              display: flex;
              justify-content: space-around;
              list-style: none;
              padding: 2em;
              margin: 0;
            }
            @keyframes marquee
                {
                    0% { transform: translateX(0); }
                    100% { transform: translateX(-66.6%); }
                }