.logos {
   &__wrapper {
   }

   &__title {
   }

   &__subtitle {
      margin-bottom: 32px;

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

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

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

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

      flex-wrap: nowrap;
   }

   &__item {
      flex-shrink: 0;
      img {
         height: 30px;
         max-width: 180px;
         object-fit: contain;

         filter: grayscale(100%) brightness(2.5) contrast(0.3);
         opacity: 0.5;
         transition:
            filter 0.3s,
            opacity 0.3s;

         @include _Tablet {
            height: 23px;
         }

         @include _Desktop {
            height: 30px;
         }
      }

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

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