.home-carousel-wrapper {
   display: flex;
   margin: 0 auto 100px;
   padding-left: 25px;
   padding-right: 25px;
   max-width: $xxl;

   .btn-resp {
      display: none;
   }
}

.home-slider-carousel {
   display: flex;
   position: relative;
   width: 20%;

   &::after {
      background: linear-gradient(0deg, rgba($gradient, 1), transparent 30%);
      content: "";
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: .3;
      height: 100%;
      width: 100%;
   }

   .img {
      background-repeat: no-repeat;
      background-size: cover;
      width: 100%;
      height: 100%;
      position: relative;
   }

   .text {
      position: absolute;
      bottom: 25px;
      right: 25px;
      left: 20px;
      z-index: 1;
   }

   .slider-title {
      color: $white;
      font-size: $font-size-larger;
      margin-bottom: 0;
      text-align: center;
   }

   h2 {
      color: $white;
      font-weight: $font-weight-bold;
      font-size: 34px;
      line-height: 1.15;
      margin-bottom: 40px;
      text-align: center;
   }

   .btn {
      width: 100%;
   }
}

.products-carousel-wrapper {
   margin-left: 10px;
   position: relative;
   width: calc(80% + 10px);

   .catalog-content {
      padding-bottom: 0;
   }

   .tns-controls {
      button {
         @include carousel-btn;

         color: $white;
         font-size: $font-size-base;
         top: 40%;

         &:last-child::after {
            content: $icons_arrow-right;
         }

         &:first-child::after {
            content: $icons_arrow-left;
         }

         &[disabled] {
            display: none;
         }

         @media screen and (min-width: $lg) {
            &:first-child {
               left: -26px;
            }

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

   .tns-nav {
      position: absolute;
      bottom: -25px;
      left: 32.7%;

      button {
         @include btn-reset;

         background: $border-color;
         border-radius: 50%;
         height: 8px;
         width: 8px;
         margin: 5px;
         transition: .25s ease;
      }

      .tns-nav-active {
         background: $brand-ctr;
         border-radius: 13px;
         width: 28px;
      }
   }
}

@media screen and (max-width: $xxl - 1) {
   .home-carousel-wrapper {
      margin-right: 15px;
      margin-left: 15px;
      padding-left: 10px;
      padding-right: 10px;
   }

   .home-slider-carousel {
      width: 30%;
   }

   .products-carousel-wrapper {
      .tns-nav {
         left: 25%;
      }
   }
}

@media screen and (max-width: $xl - 1) {
   .home-slider-carousel {
      width: 35%;
   }

   .products-carousel-wrapper {
      .tns-nav {
         left: 20%;
      }
   }
}

@media screen and (max-width: $lg - 1) {
   .home-carousel-wrapper {
      flex-wrap: wrap;
      flex-direction: column-reverse;
      align-items: center;
      margin-bottom: 40px;
      margin-right: 0;
      margin-left: 0;
      padding-left: 0;
      padding-right: 0;

      .btn-resp {
         display: inline-block;
         max-width: 350px;
         margin: 0 20px;
         width: calc(100% - 40px);
      }
   }

   .home-slider-carousel {
      display: none;
   }

   .products-carousel-wrapper {
      padding-left: 20px;
      margin-bottom: 45px;
      margin-left: 0;
      width: 100%;

      .tns-controls {
         button:first-child {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
         }

         button:last-child {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
         }
      }

      .tns-nav {
         display: flex;
         justify-content: center;
         left: 0;
         right: 0;
      }
   }
}
