.js-modal {
}
.modal-form {
   @include _XSDesktop {
      max-width: 72%;
   }
   @include _Desktop {
      max-width: 54%;
   }
   @include _HDesktop {
      max-width: 57%;
   }
   &__wrapper {
      position: relative;
      padding: 40px 20px 90px;
      background: #231f20;
      height: 100%;

      @include _Tablet {
         padding: 60px 60px 37px 145px;
      }

      @include _XSDesktop {
         padding: 60px 65px 38px 155px;
      }
      @include _Desktop {
         padding: 56px 56px 35px 136px;
      }
      @include _HDesktop {
         padding: 80px 80px 47px 193px;
      }
   }

   &__body {
   }

   &__form {
      position: relative;
      z-index: 1;
   }

   &__title {
      margin-bottom: 24px;
      color: #ffffff;

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

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

   &__inputs {
      display: grid;
      gap: 16px;
      margin-bottom: 16px;

      @include _Tablet {
         grid-template-columns: 1fr 1fr;
      }
   }

   &__input {
      &.input--textarea {
         @include _Tablet {
            grid-column: span 2;
         }
      }
   }

   &__consent {
      margin-bottom: 24px;
   }

   &__btn.btn {
      width: 100%;

      @include _Tablet {
         width: auto;
         padding: 10px 20px;
      }
      @include _XSDesktop {
         min-width: 132px;
         padding: 14px 20px;
         font-size: rem(10);
      }
      @include _Desktop {
         min-width: 116px;
         padding: 13px 20px;
         font-size: rem(10);
      }
      @include _HDesktop {
         min-width: 150px;
         padding: 22px 20px;
         font-size: rem(14);
      }
   }

   &__logo {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100px;
      aspect-ratio: 27/5;
      z-index: 0;
      img {
         width: 100%;
         height: 100%;
         object-fit: cover;

         @include _Tablet {
            object-fit: contain;
         }
         @include _HDesktop {
            // object-fit: cover;
         }
      }

      @include _Tablet {
         aspect-ratio: 3/16;
         height: 100%;
         left: 0;
         top: 0;
         bottom: 0;
         max-width: 120px;
      }

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

.w-text {
   @include _Tablet {
      max-width: 80%;
   }
   @include _XSDesktop {
      max-width: 66%;
   }
   @include _Desktop {
      max-width: 73%;
   }
   @include _HDesktop {
      max-width: 62%;
   }
}
