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

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

   .tns-controls {
      button {
         background-color: $white;

         &:first-child {
            left: 30px;
         }

         &:last-child {
            right: 30px;
         }
      }
   }

   .tns-ovh {
      border-radius: $border-radius-base;
   }

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

   .item {
      position: relative;
      background-color: $black;
      border-radius: $border-radius-base;
   }

   .item-inner {
      display: flex;
      align-items: stretch;
   }

   .item-light {
      background-color: $body-bg-alt;
   }

   .item-dark {
      .slider-title,
      .descr {
         color: $white;
      }

      .slider-annotation {
         color: $border-color;
      }

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

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

   img {
      width: 100%;
      height: auto;

      @supports (object-fit: cover) {
         min-height: 470px;
         object-fit: cover;
      }
   }

   .slider-img {
      width: 57%;
      overflow: hidden;
      position: relative;
   }

   .text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      line-height: $line-height-sm;
      padding: 30px 40px 30px 110px;
      width: 43%;
      max-width: 610px;
      margin-left: auto;
   }

   .slider-title {
      font-size: $font-size-h1;
      font-weight: $font-weight-bold;
      font-family: $font-family-heading;
      line-height: 1.25;
      margin-bottom: 0;
      color: $text-dark;
   }

   .slider-annotation {
      color: $text-muted;
      font-family: $font-family-heading;
      font-size: $font-size-smaller;
      letter-spacing: $letter-spacing-lg;
      text-transform: uppercase;
      margin-bottom: 20px;
   }

   .descr {
      margin-bottom: 25px;
   }

   .btn {
      max-width: 230px;
      width: 100%;
   }

   .tns-nav {
      position: absolute;
      display: flex;
      left: 0;
      right: 0;
      z-index: 1;
      justify-content: center;
      bottom: 20px;

      button {
         background-color: $white;
         width: 17px;
         height: 17px;
         border-radius: 50%;
         margin: 5px;
         border: 3px solid $white;
      }

      .tns-nav-active {
         background: $brand-ctr;
      }
   }

   @media screen and (max-width: $xl - 1) {
      .text {
         padding: 20px 20px 20px 80px;
         max-width: none;
         width: calc(100% - 440px);
      }

      .tns-controls button {
         &:first-child {
            left: 10px;
         }

         &:last-child {
            right: 10px;
         }
      }

      .slider-title {
         font-size: $font-size-h2;
      }

      .slider-annotation {
         margin-bottom: 10px;
      }

      .descr {
         margin-bottom: 15px;
         font-size: $font-size-smaller;
      }

      .slider-img {
         width: 440px;
      }

      img {
         @supports (object-fit: cover) {
            min-height: 380px;
         }
      }
   }

   @media screen and (max-width: $lg - 1) {
      margin: 0 -20px 20px;
      overflow: hidden;

      .tns-controls {
         button {
            &:first-child {
               left: -30px;
            }

            &:last-child {
               right: -30px;
            }
         }
      }

      .slider-title {
         font-size: $font-size-h3;
      }

      .tns-ovh,
      .item {
         border-radius: 0;
      }

      .text {
         padding: 20px 20px 20px 40px;
         max-width: none;
      }
   }

   @media screen and (max-width: $md - 1) {
      margin: 0 -10px 10px;

      .item-inner {
         flex-wrap: wrap;
      }

      .text {
         width: 100%;
         padding: 30px 20px 20px;
      }

      img {
         min-height: unset;
      }

      .slider-img {
         width: 100%;
         order: -1;
      }

      .tns-controls button {
         top: 69.5vw;
      }
   }

   @media screen and (max-width: $sm - 1) {
      .btn {
         max-width: none;
      }

      .text {
         padding: 30px 10px 20px;
         text-align: center;
      }

      .descr {
         font-size: 16px;
      }

      .slider-title {
         br {
            content: '';

            &::after {
               content: ' ';
            }
         }
      }
   }
}
