.case-gallery {
   overflow: hidden;

   &.has-video {
      .case-gallery__body {
         // min-width: 1400px
         @include _LDesktop {
            margin-top: 40px;
         }
      }

      .case-gallery__header {
         // min-width: 576px
         @include _SLMobile {
         }

         // min-width: 768px
         @include _Tablet {
         }

         // min-width: 992px
         @include _Laptop {
         }
         // min-width: 1024px
         @include _XSDesktop {
            display: grid;
            grid-template-columns: 1fr 1.27fr;
            gap: 20px;

            .case-gallery__header-wrapper {
               max-width: 54%;
            }
         }

         // min-width: 1200px
         @include _Desktop {
            grid-template-columns: 1fr 1.42fr;
         }

         // min-width: 1400px
         @include _LDesktop {
            grid-template-columns: 1fr 1.59fr;

            gap: 102px;
         }

         // min-width: 1600px
         @include _HDesktop {
         }
      }
   }

   &__header {
   }

   &__header-wrapper {
   }

   &__title {
      color: cl("accent");
   }

   &__subtitle {
      margin-top: 16px;

      // min-width: 576px
      @include _SLMobile {
      }

      // min-width: 768px
      @include _Tablet {
         margin-top: 24px;
      }

      // min-width: 992px
      @include _Laptop {
      }

      // min-width: 1024px
      @include _XSDesktop {
         margin-top: 32px;
      }

      // min-width: 1200px
      @include _Desktop {
         margin-top: 24px;
      }

      // min-width: 1400px
      @include _LDesktop {
         margin-top: 32px;
      }

      // min-width: 1600px
      @include _HDesktop {
      }
   }

   &__video {
      margin-top: 32px;

      position: relative;

      // min-width: 576px
      @include _SLMobile {
      }

      // min-width: 768px
      @include _Tablet {
      }

      // min-width: 992px
      @include _Laptop {
      }

      // min-width: 1024px
      @include _XSDesktop {
         margin-top: 0;
      }

      // min-width: 1200px
      @include _Desktop {
      }

      // min-width: 1400px
      @include _LDesktop {
      }

      // min-width: 1600px
      @include _HDesktop {
      }
   }

   &__video-preview {
      display: flex;

      &.active {
         &::before {
            display: none;
         }
      }

      &::before {
         content: "";
         position: absolute;
         width: 100%;
         height: 100%;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;

         background-color: rgba($color: #000000, $alpha: 0.3);
         pointer-events: none;
      }

      img,
      iframe {
         display: block;
         width: 100%;
         height: 100%;
         object-fit: cover;

         aspect-ratio: 340 / 195;
      }
   }

   &__video-play {
      display: flex;
      align-items: center;
      justify-content: center;

      width: 32px;
      height: 32px;

      position: absolute;

      top: 50%;
      left: 50%;

      transform: translate(-50%, -50%);

      cursor: pointer;

      // min-width: 576px
      @include _SLMobile {
      }

      // min-width: 768px
      @include _Tablet {
         width: 48px;
         height: 48px;
      }

      // min-width: 992px
      @include _Laptop {
      }

      // min-width: 1024px
      @include _XSDesktop {
      }

      // min-width: 1200px
      @include _Desktop {
      }

      // min-width: 1400px
      @include _LDesktop {
         width: 83px;
         height: 83px;
      }

      // min-width: 1600px
      @include _HDesktop {
      }
   }

   &__body {
      margin-top: 32px;
      // min-width: 576px
      @include _SLMobile {
      }

      // min-width: 768px
      @include _Tablet {
      }

      // min-width: 992px
      @include _Laptop {
      }

      // min-width: 1024px
      @include _XSDesktop {
      }

      // min-width: 1200px
      @include _Desktop {
         margin-top: 40px;
      }

      // min-width: 1400px
      @include _LDesktop {
         margin-top: 60px;
      }

      // min-width: 1600px
      @include _HDesktop {
      }
   }

   &__slider {
      position: relative;

      // min-width: 576px
      @include _SLMobile {
      }

      // min-width: 768px
      @include _Tablet {
         overflow: visible;
      }

      // min-width: 992px
      @include _Laptop {
      }

      // min-width: 1024px
      @include _XSDesktop {
      }

      // min-width: 1200px
      @include _Desktop {
      }

      // min-width: 1400px
      @include _LDesktop {
      }

      // min-width: 1600px
      @include _HDesktop {
      }
   }

   &__slider-wrapper {
   }

   &__slide {
      opacity: 0.3;

      transition: 0.3s opacity;

      &.swiper-slide-active {
         opacity: 1;
      }

      img {
         width: 100%;
         height: 100%;

         object-fit: cover;

         aspect-ratio: 340 / 236;

         // min-width: 576px
         @include _SLMobile {
         }

         // min-width: 768px
         @include _Tablet {
            aspect-ratio: 570 / 415;
         }

         // min-width: 992px
         @include _Laptop {
         }

         // min-width: 1024px
         @include _XSDesktop {
            aspect-ratio: 730 / 415;
         }

         // min-width: 1200px
         @include _Desktop {
            aspect-ratio: 740 / 415;
         }

         // min-width: 1400px
         @include _LDesktop {
         }

         // min-width: 1600px
         @include _HDesktop {
         }
      }

      // min-width: 576px
      @include _SLMobile {
      }

      // min-width: 768px
      @include _Tablet {
         max-width: 82.9%;
      }

      // min-width: 992px
      @include _Laptop {
      }

      // min-width: 1024px
      @include _XSDesktop {
         max-width: 77.4%;
      }

      // min-width: 1200px
      @include _Desktop {
         max-width: 66%;
      }

      // min-width: 1400px
      @include _LDesktop {
      }

      // min-width: 1600px
      @include _HDesktop {
      }
   }

   &__pagination {
      display: flex;
      justify-content: center;
      margin-top: 16px;

      --swiper-pagination-color: #{cl("accent")};
      --swiper-pagination-bullet-width: 31px;
      --swiper-pagination-bullet-height: 6px;
      --swiper-pagination-bullet-border-radius: 2px;
      --swiper-pagination-bullet-inactive-color: #fff;
      --swiper-pagination-bullet-inactive-opacity: 0.1;

      // min-width: 576px
      @include _SLMobile {
      }

      // min-width: 768px
      @include _Tablet {
         margin-top: 24px;
      }

      // min-width: 992px
      @include _Laptop {
      }

      // min-width: 1024px
      @include _XSDesktop {
         margin-top: 32px;
      }

      // min-width: 1200px
      @include _Desktop {
         margin-top: 24px;
      }

      // min-width: 1400px
      @include _LDesktop {
         margin-top: 40px;
      }

      // min-width: 1600px
      @include _HDesktop {
      }
   }

   &__navigation {
      position: absolute;
      z-index: 1;

      width: 100%;
      top: 46%;
      transform: translateY(-50%);

      display: flex;
      align-items: center;
      justify-content: space-between;

      padding: 0 8px;

      pointer-events: none;

      // min-width: 576px
      @include _SLMobile {
      }

      // min-width: 768px
      @include _Tablet {
         padding: 0;
      }

      // min-width: 992px
      @include _Laptop {
      }

      // min-width: 1024px
      @include _XSDesktop {
         top: 45%;
      }

      // min-width: 1200px
      @include _Desktop {
         max-width: 83.3%;
         left: 50%;
         top: 46%;
         transform: translate(-50%, -50%);
      }

      // min-width: 1400px
      @include _LDesktop {
      }

      // min-width: 1600px
      @include _HDesktop {
      }
   }

   &__arrow {
      pointer-events: visible;
      width: 32px;
      height: 32px;

      background-color: cl("accent");
      border-radius: 4px;

      display: flex;
      align-items: center;
      justify-content: center;

      cursor: pointer;

      svg {
         width: 14px;
      }

      // min-width: 576px
      @include _SLMobile {
      }

      // min-width: 768px
      @include _Tablet {
         width: 40px;
         height: 40px;

         svg {
            width: 16px;
         }
      }

      // min-width: 992px
      @include _Laptop {
      }

      // min-width: 1024px
      @include _XSDesktop {
      }

      // min-width: 1200px
      @include _Desktop {
      }

      // min-width: 1400px
      @include _LDesktop {
         // width: 83px;
         // height: 83px;

         // svg {
         //     width: 16px;
         // }
      }

      // min-width: 1600px
      @include _HDesktop {
      }
   }
}
