$slider-collections-title-font-weight: $font-weight-bold !default;

.home-slider-collections {
   max-width: 1560px;
   margin: 0 auto 60px;

   &::before,
   &::after {
      content: "";
      background: $white;
      height: 100%;
      position: absolute;
      top: 0;
      width: 20px;
      z-index: 1;
   }

   &::before {
      left: 0;
   }

   &::after {
      right: 0;
   }

   > .container {
      padding: 0 25px;
      max-width: unset;
   }

   .wpj-carousel-controls {
      top: 50%;
   }

   @media screen and (max-width: $lg - 1) {
      padding-left: 20px;

      &::before,
      &::after {
         display: none;
      }

      > .container {
         padding: 0;
      }

      .wpj-carousel-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;
         }
      }
   }

   @media screen and (max-width: $sm - 1) {
      .wpj-carousel-controls {
         display: none;
      }
   }
}

.home-collections-item {
   position: relative;
   padding: 8px 15px;

   .text {
      position: absolute;
      bottom: 25px;
      left: calc(50% - 5px);
      transform: translateX(-50%);
      padding-left: 8px;
      padding-right: 8px;
      width: calc(100% - 10px);
   }

   .btns-wrapper {
      display: flex;
      justify-content: center;
      width: 100%;
   }

   .btn-slider {
      margin: 10px;
      max-width: 245px;
      padding-left: 15px;
      padding-right: 15px;
      flex-grow: 1;
      z-index: 1;
   }

   img {
      transition: transform $transition-speed;
   }

   a:not(.btn) {
      display: block;
      overflow: hidden;
      position: relative;

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

      @media screen and (min-width: $lg) {
         @include haf {
            img {
               transform: scale(1.05);
            }
         }
      }
   }

   .slider-title {
      color: $white;
      font-weight: $slider-collections-title-font-weight;
      line-height: 1.15;
      margin-bottom: 15px;
      padding-left: 10px;
      padding-right: 10px;
      text-align: center;
      white-space: normal;
   }

   .wpj-carousel-controls {
      left: -26px;
      right: -26px;
   }

   @media screen and (max-width: $sm - 1) {
      .text {
         bottom: 13px;
      }

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

      .btns-wrapper {
         flex-wrap: wrap;
      }

      .btn-slider {
         margin: 5px;
         max-width: unset;
         width: 100%;
      }
   }
}
