.home-tns {
   margin-bottom: 20px;
   position: relative;

   > .slider-tns > .item + .item {
      display: none;
   }

   .tns-inner .tns-item {
      display: inline-flex;
   }

   .item {
      position: relative;
   }

   .item > .img {
      position: relative;
      border-radius: 5px;

      img {
         width: 100%;
         height: auto;
         border-radius: 10px;
      }
   }

   .item-light {
      .text {
         color: $black;
         width: 650px;
         max-width: 100%;
      }
   }

   .item-dark {
      .btn-primary {
         border-color: $white;
         background-color: $white;
         color: $black;

         @include haf {
            background-color: darken($white, 8%);
            border-color: darken($white, 8%);
         }
      }
   }

   .text {
      color: $white;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      line-height: 1.2;
      max-width: 520px;
      padding: 10px 0 71px 80px;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 1;

      &.white {
         .title {
            color: $white;
         }

         .descr {
            color: $white;
         }
      }

      &.black {
         .title {
            color: $black;
         }

         .descr {
            color: $black;
         }
      }
   }

   .title {
      margin-bottom: 0;
      font-size: 64px;
   }

   .descr {
      font-size: 20px;
      margin-bottom: 16px;
   }

   .btn {
      max-width: 340px;
      padding: 16px 8px;
      width: 100%;
      border-radius: 5px;
      text-transform: uppercase;
   }

   @media screen and (max-width: $xxl - 1) {
      .catalog {
         top: 24px;
      }
   }

   @media screen and (max-width: $xl - 1) {
      .item > .img {
         width: 100%;
      }

      .tns-controls {
         right: 0;
      }

      .catalog {
         display: none;
      }

      .text {
         max-width: none;
         padding: 10px 0 40px 75px;
      }

      .title {
         font-size: 42px;
      }

      .tns-controls button {
         font-size: 14px;
         width: 50px;
         height: 50px;

         @include haf {
            background-color: $body-bg-alt;
         }
      }
   }

   @media screen and (max-width: $lg - 1) {
      .title {
         font-size: 38px;
      }
   }

   @media screen and (max-width: $md - 1) {
      .text {
         max-width: none;
         padding: 10px 0 20px 35px;
      }

      .descr {
         font-size: 16px;
      }

      .btn {
         max-width: 232px;
      }
   }

   @media screen and (max-width: $sm - 1) {
      .item .img {
         padding-bottom: 10px;

         &::after {
            bottom: 10px;
            opacity: 1;
         }
      }

      .item-light .img {
         background: $white;
      }

      .title {
         max-width: unset;
         font-size: 34px;
         margin-bottom: 10px;
      }

      .text {
         text-align: center;
         padding: 10px 14px 22px 14px;
      }

      .btn {
         max-width: none;
      }

      .tns-controls {
         display: none;
      }
   }

   @media screen and (max-width: 500px) {
      .title {
         font-size: 26px;
      }

      .descr {
         font-size: 14px;
      }

      .item .img {
         padding-bottom: 6px;

         &::after {
            bottom: 6px;
         }
      }
   }
}
