.about {
   &__wrapper {
   }

   &__body {
      background-color: #ffffff;
      color: cl("dark-text");
      padding: 32px 32px 337px;
      position: relative;
      overflow: hidden;

      @include _Tablet {
         padding: 40px 40px 240px;
      }
      @include _XSDesktop {
         padding: 0;
         position: relative;
      }
   }

   &__content {
      position: relative;
      z-index: 3;

      @include _XSDesktop {
         padding: 50px 0 50px 50px;
         max-width: 590px;
      }

      @include _Desktop {
         max-width: 620px;
      }

      @include _HDesktop {
         padding: 80px 0 80px 80px;
         max-width: 950px;
      }
   }

   &__title {
      margin-bottom: 24px;

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

   &__subtitle {
      margin-bottom: 32px;

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

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

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

   &__advantages {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 24px;
      row-gap: 40px;
      margin-bottom: 32px;

      @include _Tablet {
         display: flex;
         gap: 24px;
         margin-bottom: 40px;
      }

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

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

   &__advantages-item {
      @include _Tablet {
         flex: 0 1 130px;
      }

      @include _HDesktop {
         flex: 0 1 190px;
      }
   }

   &__link {
      justify-content: start;
      font-size: rem(12);

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

      @include _HDesktop {
         font-size: rem(14);
      }
   }

   &__bg {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 100%;

      @include _XSDesktop {
         height: 100%;
         right: 0;
         width: 367px;
      }

      @include _Desktop {
         width: 550px;
      }

      @include _LDesktop {
         width: 650px;
      }

      @include _HDesktop {
         width: 900px;
      }
   }

   &__bg-wrapper {
      position: relative;
      aspect-ratio: 7/5;

      @include _SLMobile {
         aspect-ratio: 16/9;
      }

      @include _Tablet {
         aspect-ratio: auto;
         width: 75%;
         height: 342px;
         margin-left: auto;
      }
      @include _XSDesktop {
         margin-left: 0;
         height: 100%;
         width: 100%;
      }
   }

   &__team {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 100%;

      height: 100%;
      z-index: 2;

      img {
         height: 100%;
         width: 100%;
         object-fit: cover;
         object-position: center;

         @include _Tablet {
            object-position: top;
         }
      }
      @include _XSDesktop {
         height: auto;
         bottom: 0;
      }
      @include _Desktop {
      }
   }

   &__znak {
      height: 210px;
      width: 208px;
      position: absolute;
      top: -64px;
      z-index: 1;
      left: 50%;
      transform: translateX(-50%);

      @include _Tablet {
         height: 232px;
         width: 234px;
         left: -134px;
         top: 130px;
         transform: translateX(0);
      }

      @include _XSDesktop {
         height: 292px;
         width: 292px;
         top: 50px;
         transform: translateX(-50%);
         left: 55%;
      }

      @include _Desktop {
         height: 381px;
         width: 383px;
         top: -26px;
         left: 57%;
      }
      @include _HDesktop {
         height: 627px;
         width: 630px;
      }
      img {
         width: 100%;
         height: 100%;
      }
   }
}
