.home-squares-wrapper {
   position: relative;

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

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

   .show-all-wrapper {
      display: none;
   }
}

.slider-squares {
   display: flex;
   flex-wrap: wrap;
   margin: 0 calc(-1 * #{$grid-gutter-width} / 2) $spacer-lg;

   &.tns-slider {
      flex-wrap: nowrap;
      margin: 0 0 $spacer-lg;

      .slider-item {
         margin: 0;
      }
   }

   .slider-item {
      display: block;
      position: relative;
      overflow: hidden;
      margin: calc(#{$grid-gutter-width} / 2);
      width: calc(33.33% - 20px);
      border-radius: $border-radius-base;

      .item-inner {
         position: relative;

         &::after {
            content: '';
            position: absolute;
            top: 20%;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to top, $black, rgba($black, 0));
            opacity: .5;
            border-radius: $border-radius-base;
         }
      }
   }

   .img-fluid {
      @supports (object-fit: cover) {
         width: 100%;
         height: 100% !important;
         object-fit: cover;
      }

      border-radius: $border-radius-base;
   }

   .text {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 30px;
      z-index: 1;
   }

   .title {
      color: $white;
   }

   .btns {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .btn {
         margin-right: 10px;
         margin-bottom: 10px;
      }
   }
}

.slider-brands {
   .slider-item {
      width: calc(50% - 20px);

      &::after {
         top: 0;
         background: linear-gradient(to right, $black, rgba($black, 0));
      }
   }

   .img-fluid {
      min-height: 210px;
   }

   .text {
      padding: 30px 50px;
   }

   .title {
      font-size: $font-size-h2;
      font-weight: $font-weight-semibold;
      margin-bottom: 10px;
   }

   .producer-logo {
      position: absolute;
      top: 50%;
      right: 50px;
      max-width: 180px;
      transform: translateY(-50%);
      filter: invert(1);
      z-index: 1;
   }

   @media screen and (max-width: $xl - 1) {
      .text {
         padding: 20px 200px 20px 20px;
      }

      .producer-logo {
         right: 20px;
      }

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

   @media screen and (max-width: $lg - 1) {
      .slider-item {
         width: calc(100% - 20px);
      }

      .producer-logo {
         top: 30px;
         right: 30px;
         transform: translateY(0);
      }

      .text {
         padding: 30px;
      }

      .title {
         font-size: 32px;
      }
   }

   @media screen and (max-width: $md - 1) {
      .producer-logo {
         display: none;
      }
   }
}

@media screen and (max-width: $lg - 1) {
   .home-squares-wrapper {
      position: relative;
      margin: 0 -20px;
      padding: 0 20px;
      overflow: hidden;
   }
}

@media screen and (max-width: $md - 1) {
   .home-squares-wrapper {
      margin: 0 -10px;
      padding: 10px;

      .tns-ovh {
         margin: 0 -10px;
      }
   }

   .slider-squares {
      .slider-item {
         padding: 0 10px;
      }
   }
}

@media screen and (max-width: $sm - 1) {
   .home-squares-wrapper {
      max-height: calc(3 * (100vw - 10px) + 140px);
      overflow: hidden;
      margin-bottom: 10px;

      .tns-ovh {
         margin: 0;
      }

      .show-all-wrapper {
         display: block;
         position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
         height: 30px;
         background-color: $white;

         .btn {
            position: absolute;
            left: calc(50% - 30px);
            bottom: 0;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: $black;
            background-color: $body-bg-alt;
            border-radius: 50%;
            font-size: 18px;
         }

         &::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: calc(100% - 1px);
            height: 111px;
            background: linear-gradient(to top, $white, rgba($white, 0));
         }
      }

      &.opened {
         max-height: unset;

         .show-all-wrapper {
            display: none;
         }
      }
   }

   .slider-squares {
      .slider-item {
         width: 100%;
         margin: 0 0 10px;

         .text {
            padding: 20px 20px 10px;
         }
      }
   }

   .slider-brands {
      margin-bottom: 0;
   }
}
