.article-gallery {
   overflow: hidden;

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

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

      // 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 {
         margin: 100px 0;
      }
   }

   &__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: 50%;
      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 {
      }

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

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

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

   &__arrow.slider-btn {
      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 {
      }
   }
}
