.logos {
   &__wrapper {
   }

   &__title {
   }

   &__subtitle {
      margin-bottom: 32px;

      @include _HDesktop {
         margin-bottom: 60px;
      }
   }

   &__list {
      margin: 0 -10px;
      overflow: hidden;

      @include _Tablet {
         margin: 0 -40px;
      }
   }

   &__track {
      display: flex;
      gap: 60px;

      flex-wrap: nowrap;
   }

   &__item {
      flex-shrink: 0;
      img {
         height: 40px;
         filter: grayscale(1) brightness(0.8) contrast(0.8);
         transition:
            filter 0.3s,
            opacity 0.3s;

         @include _Desktop {
            height: 30px;
         }
      }

      &:hover img {
         filter: none;
      }
   }
}

.logos:has(.logos__item:hover) .logos__list {
   animation-play-state: paused;
}
