.hero-about {
   &__wrapper {
      padding: 0 0 40px;

      @include _Tablet {
         padding: 0 0 70px;
         position: relative;
      }
      @include _XSDesktop {
         padding: 0 0 118px;
      }
      @include _Desktop {
         padding: 0 0 84px;
      }
      @include _HDesktop {
         padding: 0 0 200px;
      }
   }

   &__body {
      display: flex;
      flex-direction: column;

      @include _Tablet {
         gap: 100px;
      }

      @include _XSDesktop {
         gap: 80px;
      }
      @include _Desktop {
         gap: 100px;
      }
      @include _HDesktop {
         gap: 180px;
      }
   }

   &__breadcrumbs {
      margin-bottom: 20px;

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

   &__left {
      order: 1;

      @include _Tablet {
         order: 0;
      }
   }

   &__h1 {
      margin-bottom: 16px;

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

   &__descr {
      margin-bottom: 32px;
      @include _HDesktop {
         margin-bottom: 40px;
         max-width: 34%;
      }
   }

   &__actions {
      display: flex;
      gap: 12px;
      margin-bottom: 24px;

      @include _Tablet {
         gap: 32px;
         margin-bottom: 32px;
      }
      @include _HDesktop {
         margin-bottom: 40px;
      }
   }

   &__logos {
   }

   &__logos-title {
      margin-bottom: 16px;
      @include _HDesktop {
         margin-bottom: 32px;
      }
   }

   &__logos-list {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      overflow-x: scroll;
      overflow-y: hidden;

      gap: 20px;
      margin: 0 -10px;
      padding: 6px 0;

      @include _Tablet {
         overflow-x: unset;
      }

      @include _XSDesktop {
         padding: 0;
      }
   }

   &__logos-item {
      height: 13px;
      width: auto;

      @include _XSDesktop {
         height: 18px;
      }

      @include _HDesktop {
         height: 20px;
      }

      img {
         object-fit: contain;
         width: auto;
         height: 100%;
         max-width: 140px;
         filter: grayscale(100%) brightness(2.5) contrast(0.3);
      }

      &:first-child {
         margin-left: 10px;
      }
   }

   &__right {
      aspect-ratio: 1/1;
      max-height: 274px;
      margin: 0 auto;
      margin-bottom: 20px;
      @include _Tablet {
         margin-bottom: 0;
      }

      @include _Tablet {
         max-height: none;
         margin-top: 0;
         position: absolute;
         top: 40px;
         right: 0;
      }

      @include _XSDesktop {
         top: 83px;
         right: 40px;
         max-height: 427px;
      }

      @include _Desktop {
         max-height: 488px;
         top: 40px;
      }
      @include _LDesktop {
         max-height: 550px;
         right: 70px;
      }
      @include _HDesktop {
         max-height: 754px;
         top: 40px;
         right: 195px;
      }
   }

   &__image {
      height: 100%;
      width: 100%;

      img {
         width: 100%;
         height: 100%;
         object-fit: contain;
      }
   }
   &__btn.btn {
      min-width: 165px;
      padding: 18px;

      @include _Desktop {
         font-size: rem(12);
      }
      @include _HDesktop {
         font-size: rem(14);
         min-width: 200px;
         padding: 22px;
      }
   }

   &__link {
      .arrow-link__arrow {
         width: 40px;
         height: 40px;
      }
   }

   .bredcrumbs {
      margin-bottom: 0px;
   }
}

.w-50 {
   @include _Tablet {
      width: 55%;
   }

   @include _XSDesktop {
      width: 50%;
   }
   @include _Desktop {
      width: 45%;
   }
   @include _LDesktop {
      width: 42%;
   }
   @include _HDesktop {
      width: 40%;
   }
}
