.footer {
   background-color: #000000;
   &__wrapper {
      position: relative;
   }

   &__top {
      position: relative;

      &::after {
         content: "";
         position: absolute;
         bottom: 0;
         left: 0;
         width: 100%;
         height: 1px;
         background-color: #ffffff33;
      }
   }

   &__main {
      padding: 60px 0;
      position: relative;

      @include _Tablet {
         padding: 70px 0 55px;
      }

      @include _XSDesktop {
         padding: 70px 0 60px;
      }
      @include _Desktop {
         padding: 70px 0 70px;
      }
      @include _HDesktop {
         padding: 100px 0;
      }

      @include _Tablet {
         display: grid;
         grid-template-columns: 220px auto;
         column-gap: 130px;
         row-gap: 77px;
      }

      @include _XSDesktop {
         display: flex;
         justify-content: space-between;
         gap: 28px;
         gap: 0;
      }

      @include _Desktop {
         gap: 68px;
      }

      @include _HDesktop {
         gap: 175px;
      }
   }

   &__col {
      text-align: center;

      @include _Tablet {
         text-align: left;
      }
      &:last-child {
         @include _XSDesktop {
            order: 1;
         }
      }
   }

   &__logo {
      width: 265px;
      display: block;

      @include _Tablet {
         width: 220px;
      }
      @include _XSDesktop {
         width: 186px;
      }

      @include _Desktop {
         width: 170px;
      }

      @include _HDesktop {
         width: 290px;
      }
   }

   &__soc {
      display: flex;
      gap: 26px;

      img {
         width: 42px;
         height: 42px;
         @include _XSDesktop {
            width: 32px;
            height: 32px;
         }
         @include _HDesktop {
            width: 43px;
            height: 43px;
         }
      }

      @include _XSDesktop {
         gap: 20px;
      }

      @include _HDesktop {
         gap: 28px;
      }
   }

   &__soc-link {
   }

   &__btn {
      color: #ffffff;
      font-size: rem(10);
      padding: 16px;
      min-width: 250px;
      font-weight: 500;
      text-transform: uppercase;
      border-radius: 4px;
      background-color: cl("accent");
      text-align: center;
      transition: all 0.3s ease-in-out;
      line-height: 1;
      cursor: pointer;
      &:hover {
         background-color: cl("accent-hover");
      }

      @include _Tablet {
         min-width: 165px;
      }

      @include _HDesktop {
         min-width: 250px;
         padding: 24px;
         font-size: rem(14);
      }
   }

   &__contacts {
   }

   &__bottom {
   }
}

.footer__col--logo {
   margin-bottom: 62px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 32px;

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

   @include _XSDesktop {
   }
   @include _Desktop {
   }

   @include _HDesktop {
      gap: 40px;
   }
}

.footer__col--nav {
   display: grid;
   gap: 48px;
   justify-content: center;
   text-align: center;

   @include _Tablet {
      grid-column: span 2;
      grid-template-columns: 18% auto;
      gap: 80px;
      text-align: left;
      justify-content: start;
   }

   @include _XSDesktop {
      gap: 46px;
      grid-column: span 1;
      display: flex;
   }
   @include _Desktop {
      gap: 120px;
   }
   @include _HDesktop {
      gap: 190px;
   }
}

.footer__col--contacts {
   margin-bottom: 48px;

   @include _Tablet {
      margin-bottom: 0;
   }

   @include _XSDesktop {
      order: 1;
   }
   @include _Desktop {
      max-width: 240px;
      flex: 1 1 auto;
   }
   @include _HDesktop {
      max-width: 445px;
   }
}
