.contacts-form {
   &__wrapper {
      background-color: #000000;

      @include _XSDesktop {
         max-width: 835px;
         margin: 0 auto;
      }

      @include _HDesktop {
         max-width: 1375px;
      }
   }

   &__body {
      display: flex;
      flex-direction: column;
      padding: 10px;

      @include _Tablet {
         flex-direction: row;
      }
   }

   &__form {
      padding: 50px 30px;

      @include _Tablet {
         padding: 30px 30px 30px 50px;
         order: 1;
      }

      @include _XSDesktop {
         padding: 30px 60px 30px 40px;
         order: 0;
      }

      @include _HDesktop {
         padding: 80px 100px 80px 80px;
      }
   }

   &__manager {
      @include _Tablet {
         flex: 0 0 182px;
      }

      @include _XSDesktop {
         flex: 0 0 300px;
      }

      @include _HDesktop {
         flex: 0 0 500px;
      }
   }

   &__title {
      margin-bottom: 8px;

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

   &__descr {
      margin-bottom: 32px;
      color: #ffffff99;

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

.callback-form {
   &__body {
      display: grid;

      @include _Tablet {
         grid-template-columns: 1fr 1fr;
         column-gap: 16px;
      }

      @include _XSDesktop {
         grid-template-columns: 31% 33% 23%;
         column-gap: 8px;
      }

      @include _HDesktop {
         column-gap: 16px;
      }
   }

   &__input {
      margin-bottom: 16px;

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

   &__consent {
      margin-bottom: 16px;
      @include _Tablet {
         grid-column: span 2;
         margin-top: 25px;
      }

      @include _XSDesktop {
         order: 1;
         margin-top: 16px;
         margin-bottom: 0;
         grid-column: span 3;
      }
   }

   &__btn.btn {
      padding: 14px 12px;
      font-size: rem(10);
      @include _Tablet {
         grid-column: span 2;
      }

      @include _XSDesktop {
         grid-column: span 1;
      }
   }
}

.img-manager {
   margin: 0 auto;

   &__bg {
      background-color: cl("accent");
      width: 320px;
      height: 280px;
      position: relative;

      @include _Tablet {
         width: 100%;
         height: 254px;
      }

      @include _XSDesktop {
         height: 100%;
      }

      &::before {
         content: "";
         position: absolute;
         width: 100%;
         height: auto;
         background: url("../../images/logo-opaciti.png") no-repeat left top;
         background-size: contain;
         z-index: 2;
         top: 28px;
         left: 26px;
         bottom: 28px;

         @include _Tablet {
            top: 17px;
            left: 7px;
            bottom: 17px;
         }

         @include _XSDesktop {
            top: 28px;
            left: 12px;
            bottom: 28px;
         }

         @include _Desktop {
            top: 24px;
            left: 12px;
            bottom: 24px;
         }

         @include _HDesktop {
            top: 9px;
            left: 23px;
            bottom: 30px;
         }
      }
   }

   &__img {
      height: 330px;
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 4;

      @include _Tablet {
         height: 240px;
      }

      @include _XSDesktop {
         height: 320px;
      }

      @include _HDesktop {
         height: 520px;
      }

      img {
         height: 100%;
      }
   }
   &__info {
      position: absolute;
      z-index: 4;
      bottom: 16px;
      left: 16px;

      @include _Tablet {
      }

      @include _XSDesktop {
         bottom: 16px;
         left: 16px;
      }

      @include _HDesktop {
         bottom: 32px;
         left: 32px;
      }
   }

   &__name {
      margin-bottom: 8px;
      font-size: rem(16);
      line-height: 1.4;
   }

   &__post {
      color: #ffffff99;
   }
}

.img-manager--main {
   @include _Tablet {
      display: none;
   }

   @include _XSDesktop {
      display: block;
   }
}

.img-manager--second {
   display: none;
   position: static;
   padding-top: 16px;

   @include _Tablet {
      display: block;
   }

   @include _XSDesktop {
      display: none;
   }
}
