 * {
     scrollbar-width: none;
     box-sizing: border-box;
     margin: 0px;
     padding: 0px;
     font-family: "Nuckle", Sans-serif;
     font-family: "Zalando Sans", sans-serif;
     font-weight: 500;
 }

 body {
     /* background-color: blue; */
     background-color: #FCE6E6;
     height: 100vh;
     width: 100vw;
     font-size: 1rem;
     user-select: none;
 }

 .brandsContainer {
     /* background-color: #EE0100; */
     height: 45vh;
     width: 100%;
     margin: 0rem auto;
     margin-top: 3rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-evenly;
     padding: 2rem 0rem;
 }

 .brands {
     /* background-color: #d01010; */
     height: 100px;
     width: 100%;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 @keyframes slide {
     from {
         transform: translateX(0);
     }

     to {
         transform: translateX(-100%);
         transform: translateX(-10px *5);
     }
 }

 .logos {
     overflow: hidden;
     padding: 60px 0;
     width: 100%;
     text-align: center;
     background: white;
     white-space: nowrap;
     position: relative;
 }

 .logos:before,
 .logos:after {
     position: absolute;
     top: 0;
     width: 250px;
     height: 100%;
     content: "";
     z-index: 2;
 }

 .logos:before {
     left: 0;
     background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
 }

 .logos:after {
     right: 0;
     background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
 }

 .logos:hover .logos-slide {
     animation-play-state: paused;
 }

 .logos-slide {
     display: inline-block;
     animation: 35s slide infinite linear;
 }

 .logos-slide img {
     height: 70px;
     margin: 0 40px;
 }


 @media screen and (max-width: 900px) {
     .brandsContainer {
         height: 35vh;
         margin-top: 0rem;
         padding: 0rem 0rem;
     }

     .brands {
         height: 80px;
     }

     .logos-slide img {
         height: 50px;
         margin: 0 40px;
     }
 }