.contact-block {
   &__body {
      display: grid;
      gap: 32px;

      // min-width: 576px
      @include _SLMobile {
      }

      // min-width: 768px
      @include _Tablet {
      }

      // min-width: 992px
      @include _Laptop {
      }

      // min-width: 1024px
      @include _XSDesktop {
         grid-template-columns: 1fr 1fr;
         row-gap: 98px;
         column-gap: 55px;
      }

      // min-width: 1200px
      @include _Desktop {
         grid-template-columns: 1fr 1.11fr;
         row-gap: 40px;
         column-gap: 70px;
      }

      // min-width: 1400px
      @include _LDesktop {
         grid-template-columns: 1fr 1.35fr;

         row-gap: 65px;
         column-gap: 50px;
      }

      // min-width: 1600px
      @include _HDesktop {
      }
   }

   &__header {
      // min-width: 576px
      @include _SLMobile {
      }

      // min-width: 768px
      @include _Tablet {
         display: flex;
         gap: 20px;
         align-items: flex-end;
      }

      // min-width: 992px
      @include _Laptop {
      }

      // min-width: 1024px
      @include _XSDesktop {
         flex-direction: column;
         align-items: unset;
         gap: 40px;
      }

      // min-width: 1200px
      @include _Desktop {
      }

      // min-width: 1400px
      @include _LDesktop {
      }

      // min-width: 1600px
      @include _HDesktop {
      }
   }

   &__title {
   }

   &__subtitle {
      margin-bottom: 32px;

      // min-width: 576px
      @include _SLMobile {
      }

      // min-width: 768px
      @include _Tablet {
         margin-bottom: 0;
      }

      // min-width: 992px
      @include _Laptop {
      }

      // min-width: 1024px
      @include _XSDesktop {
      }

      // min-width: 1200px
      @include _Desktop {
      }

      // min-width: 1400px
      @include _LDesktop {
      }

      // min-width: 1600px
      @include _HDesktop {
      }
   }

   &__links {
      display: grid;
      gap: 24px;

      // min-width: 576px
      @include _SLMobile {
      }

      // min-width: 768px
      @include _Tablet {
         padding-inline-end: 30px;
      }

      // min-width: 992px
      @include _Laptop {
      }

      // min-width: 1024px
      @include _XSDesktop {
      }

      // min-width: 1200px
      @include _Desktop {
         display: flex;
         align-items: center;
         gap: 32px;
      }

      // min-width: 1400px
      @include _LDesktop {
      }

      // min-width: 1600px
      @include _HDesktop {
      }
   }

   &__link {
      .header-contacts__item {
         display: inline-flex;
         gap: 16px;

         // min-width: 768px
         @include _Tablet {
            gap: 8px;
         }
      }

      .header-contacts__icon {
         flex: 0 0 24px;
         width: 24px;
         height: 24px;

         // min-width: 1400px
         @include _LDesktop {
            flex: 0 0 32px;
            width: 32px;
            height: 32px;
         }
      }

      .header-contacts__value {
         font-weight: 700;
         font-size: rem(18);
         line-height: 140%;
         text-transform: uppercase;
         color: #ffffff;

         // min-width: 576px
         @include _SLMobile {
         }

         // min-width: 768px
         @include _Tablet {
            font-size: rem(14);
         }

         // min-width: 992px
         @include _Laptop {
         }

         // min-width: 1024px
         @include _XSDesktop {
            font-weight: 700;
            font-size: rem(16);
            line-height: 22px;
         }

         // min-width: 1200px
         @include _Desktop {
         }

         // min-width: 1400px
         @include _LDesktop {
            font-size: rem(20);
         }

         // min-width: 1600px
         @include _HDesktop {
         }
      }
   }

   &__maps {
      // min-width: 576px
      @include _SLMobile {
      }

      // min-width: 768px
      @include _Tablet {
      }

      // min-width: 992px
      @include _Laptop {
      }

      // min-width: 1024px
      @include _XSDesktop {
         grid-row: span 2;
      }

      // min-width: 1200px
      @include _Desktop {
      }

      // min-width: 1400px
      @include _LDesktop {
      }

      // min-width: 1600px
      @include _HDesktop {
      }
   }

   &__map-tabs {
      margin-bottom: 16px;

      display: flex;

      // min-width: 768px
      @include _Tablet {
         display: none;
      }
   }

   &__map-tab {
      flex: 1;
      padding: 14px 16px;
      border: 1px solid rgba(255, 255, 255, 0.1);

      display: flex;
      align-items: center;
      justify-content: center;

      cursor: pointer;

      &:first-child {
         border-top-left-radius: 4px;
         border-bottom-left-radius: 4px;
      }

      &:last-child {
         border-top-right-radius: 4px;
         border-bottom-right-radius: 4px;
      }

      &.active {
         border-color: cl("accent");
         background-color: cl("accent");
      }
   }

   &__map-items {
      // min-width: 576px
      @include _SLMobile {
      }

      // min-width: 768px
      @include _Tablet {
         display: grid;
         gap: 20px;
         grid-template-columns: 1fr 1fr;
      }

      // min-width: 992px
      @include _Laptop {
      }

      // min-width: 1024px
      @include _XSDesktop {
         grid-template-columns: 1fr;
      }

      // min-width: 1200px
      @include _Desktop {
         grid-template-columns: 1fr 1fr;
      }

      // min-width: 1400px
      @include _LDesktop {
      }

      // min-width: 1600px
      @include _HDesktop {
      }
   }
   &__map-item {
      // min-width: 768px
      @include _Tablet {
         display: block;
      }
   }

   &__footer-form {
      padding: 0 20px;

      // min-width: 576px
      @include _SLMobile {
      }

      // min-width: 768px
      @include _Tablet {
         padding: 0;
      }

      // min-width: 992px
      @include _Laptop {
      }

      // min-width: 1024px
      @include _XSDesktop {
      }

      // min-width: 1200px
      @include _Desktop {
      }

      // min-width: 1400px
      @include _LDesktop {
      }

      // min-width: 1600px
      @include _HDesktop {
      }
   }
}

.map-card {
   &__body {
      height: 100%;
      background-color: #000000;

      // min-width: 576px
      @include _SLMobile {
      }

      // min-width: 768px
      @include _Tablet {
      }

      // min-width: 992px
      @include _Laptop {
      }

      // min-width: 1024px
      @include _XSDesktop {
         display: flex;
      }

      // min-width: 1200px
      @include _Desktop {
         flex-direction: column;
      }

      // min-width: 1400px
      @include _LDesktop {
      }

      // min-width: 1600px
      @include _HDesktop {
      }
   }

   &__canvas {
      aspect-ratio: 340 / 193;

      background-color: cl("accent");

      // min-width: 576px
      @include _SLMobile {
      }

      // min-width: 768px
      @include _Tablet {
         aspect-ratio: 334 / 240;
      }

      // min-width: 992px
      @include _Laptop {
      }

      // min-width: 1024px
      @include _XSDesktop {
         aspect-ratio: unset;

         flex: 0 0 188px;
      }

      // min-width: 1200px
      @include _Desktop {
         aspect-ratio: 266 / 193;
         flex: unset;
      }

      // min-width: 1400px
      @include _LDesktop {
         aspect-ratio: 500 / 363;
      }

      // min-width: 1600px
      @include _HDesktop {
      }
   }

   &__content {
      padding: 24px;

      // min-width: 576px
      @include _SLMobile {
      }

      // min-width: 768px
      @include _Tablet {
      }

      // min-width: 992px
      @include _Laptop {
      }

      // min-width: 1024px
      @include _XSDesktop {
         padding: 40px 24px;
      }

      // min-width: 1200px
      @include _Desktop {
         padding: 24px;
      }

      // min-width: 1400px
      @include _LDesktop {
         padding: 40px;
      }

      // min-width: 1600px
      @include _HDesktop {
      }
   }

   &__city {
      margin-bottom: 8px;

      color: cl("accent");

      // min-width: 576px
      @include _SLMobile {
      }

      // min-width: 768px
      @include _Tablet {
         margin-bottom: 16px;
      }

      // min-width: 992px
      @include _Laptop {
      }

      // min-width: 1024px
      @include _XSDesktop {
         margin-bottom: 8px;
      }

      // min-width: 1200px
      @include _Desktop {
      }

      // min-width: 1400px
      @include _LDesktop {
         margin-bottom: 16px;
      }

      // min-width: 1600px
      @include _HDesktop {
      }
   }

   &__addresss {
      margin-bottom: 8px;

      // min-width: 576px
      @include _SLMobile {
      }

      // min-width: 768px
      @include _Tablet {
         margin-bottom: 16px;
      }

      // min-width: 992px
      @include _Laptop {
      }

      // min-width: 1024px
      @include _XSDesktop {
         margin-bottom: 8px;
      }

      // min-width: 1200px
      @include _Desktop {
      }

      // min-width: 1400px
      @include _LDesktop {
         margin-bottom: 16px;
      }

      // min-width: 1600px
      @include _HDesktop {
      }
   }

   &__grafik {
      color: rgba(255, 255, 255, 0.6);
   }

   &__link {
      margin-top: 32px;

      .arrow-link__arrow {
         width: 30px;
         height: 30px;
         flex: 0 0 30px;

         &::after {
            background-size: 8px 9px;
         }

         img {
            width: 8px;
            height: 9px;
         }

         // min-width: 1400px
         @include _LDesktop {
            width: 40px;
            height: 40px;
            flex: 0 0 40px;

            &::after {
               background-size: unset;
            }

            img {
               width: unset;
               height: unset;
            }
         }
      }

      .arrow-link__text {
         font-weight: 500;
         font-size: rem(12);
         line-height: 140%;

         text-transform: uppercase;
         color: #ffffff;

         // min-width: 576px
         @include _SLMobile {
         }

         // min-width: 768px
         @include _Tablet {
         }

         // min-width: 992px
         @include _Laptop {
         }

         // min-width: 1024px
         @include _XSDesktop {
            font-size: rem(10);
         }

         // min-width: 1200px
         @include _Desktop {
         }

         // min-width: 1400px
         @include _LDesktop {
            font-size: rem(14);
         }

         // min-width: 1600px
         @include _HDesktop {
         }
      }

      .arrow-link {
         display: inline-flex;

         // min-width: 1400px
         @include _LDesktop {
            gap: 16px;
         }
      }

      // min-width: 576px
      @include _SLMobile {
      }

      // min-width: 768px
      @include _Tablet {
         margin-top: 24px;
      }

      // min-width: 992px
      @include _Laptop {
      }

      // min-width: 1024px
      @include _XSDesktop {
         margin-top: 16px;
      }

      // min-width: 1200px
      @include _Desktop {
         margin-top: 24px;
      }

      // min-width: 1400px
      @include _LDesktop {
         margin-top: 32px;
      }

      // min-width: 1600px
      @include _HDesktop {
      }
   }
}

.contact-form {
   &__body {
      // min-width: 576px
      @include _SLMobile {
      }

      // min-width: 768px
      @include _Tablet {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 20px;
      }

      // min-width: 992px
      @include _Laptop {
      }

      // min-width: 1024px
      @include _XSDesktop {
         grid-template-columns: 1fr;
         gap: 16px;

         padding-right: 54px;
      }

      // min-width: 1200px
      @include _Desktop {
         padding-right: 42px;
      }

      // min-width: 1400px
      @include _LDesktop {
         padding-right: 30px;
         gap: 32px;
      }

      // min-width: 1600px
      @include _HDesktop {
      }
   }

   &__descr {
      margin-bottom: 24px;

      color: cl("text", 0.6);

      // min-width: 576px
      @include _SLMobile {
      }

      // min-width: 768px
      @include _Tablet {
      }

      // min-width: 992px
      @include _Laptop {
      }

      // min-width: 1024px
      @include _XSDesktop {
         margin-bottom: unset;
      }

      // min-width: 1200px
      @include _Desktop {
      }

      // min-width: 1400px
      @include _LDesktop {
      }

      // min-width: 1600px
      @include _HDesktop {
      }
   }

   &__form-wrapper {
      position: relative;
      // min-width: 1024px
      @include _XSDesktop {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
      }

      // min-width: 1200px
      @include _Desktop {
      }

      // min-width: 1400px
      @include _LDesktop {
      }

      // min-width: 1600px
      @include _HDesktop {
      }
   }

   &__fields {
      display: grid;
      gap: 16px;

      // min-width: 576px
      @include _SLMobile {
      }

      // min-width: 768px
      @include _Tablet {
      }

      // min-width: 992px
      @include _Laptop {
      }

      // min-width: 1024px
      @include _XSDesktop {
         grid-template-columns: repeat(3, 1fr);
         column-gap: 8px;
      }

      // min-width: 1200px
      @include _Desktop {
      }

      // min-width: 1400px
      @include _LDesktop {
         column-gap: 16px;
      }

      // min-width: 1600px
      @include _HDesktop {
      }
   }

   &__field {
      .input {
         width: 100%;
      }

      // min-width: 576px
      @include _SLMobile {
      }

      // min-width: 768px
      @include _Tablet {
      }

      // min-width: 992px
      @include _Laptop {
      }

      // min-width: 1024px
      @include _XSDesktop {
      }

      // min-width: 1200px
      @include _Desktop {
      }

      // min-width: 1400px
      @include _LDesktop {
      }

      // min-width: 1600px
      @include _HDesktop {
      }
   }

   &__consent {
      margin-top: 24px;
      // min-width: 576px
      @include _SLMobile {
      }

      // min-width: 768px
      @include _Tablet {
         margin-top: 16px;
      }

      // min-width: 992px
      @include _Laptop {
      }

      // min-width: 1024px
      @include _XSDesktop {
         // padding-right: 40px;
         flex: 0 1 240px;
      }

      // min-width: 1200px
      @include _Desktop {
         flex: 1 1 100%;
         margin-top: 8px;
      }

      // min-width: 1400px
      @include _LDesktop {
         margin-top: 16px;

         .consent-block__label-text {
            max-width: 400px;
            display: block;
         }
      }

      // min-width: 1600px
      @include _HDesktop {
      }
   }

   &__submit {
      margin-top: 24px;

      .btn {
         width: 100%;

         font-weight: 500;
         font-size: rem(10);
         line-height: 1;

         text-transform: uppercase;

         color: #ffffff;

         &.is-loading {
            color: transparent;
            pointer-events: none;
            opacity: 0.8;
         }

         // min-width: 1024px
         @include _XSDesktop {
            height: 100%;
            padding: 16px;
         }
         @include _Desktop {
            padding: 14px 16px;
         }

         // min-width: 1400px
         @include _LDesktop {
            font-size: rem(14);

            padding: 22px 32px;
         }
      }

      // min-width: 576px
      @include _SLMobile {
      }

      // min-width: 768px
      @include _Tablet {
         margin-top: 16px;
      }

      // min-width: 992px
      @include _Laptop {
      }

      // min-width: 1024px
      @include _XSDesktop {
         height: 40px;
      }

      // min-width: 1200px
      @include _Desktop {
         margin-top: 24px;
         height: auto;
      }

      // min-width: 1400px
      @include _LDesktop {
         margin-top: 40px;
      }

      // min-width: 1600px
      @include _HDesktop {
      }
   }
}
