.main-slider-wrapper {
  position: relative;
  &:after {
    display: block;
    position: absolute;
    content: '';
    width: 100%;
    height: 32px;
    left: 0;
    bottom: 0;
    transform: translateY(50%);
    background: url('../../img/pattern.png') left top repeat-x;
    z-index: 3;
    @media (max-width: 1024px) {
      display: none;
    }
  }
  .main-slider {
    z-index: 1;
    height: 650px;
    overflow: hidden;
    @media (max-width: 1440px) {
      height: 500px;
    }
    @media (max-width: 1366px) {
      height: 470px;
    }
    @media (max-width: 1024px) {
      height: auto;
    }
    .swiper-wrapper {
      height: 100%;
      @media (max-width: 1024px) {
        height: auto;
      }
      .swiper-slide {
        position: relative;
        height: 100%;
        @media (max-width: 1024px) {
          height: auto;
          background-color: var(--c-gray-25);
        }
        * {
          transition: all 0.3s ease-in-out;
        }
        figure {
          position: absolute;
          height: 100%;
          width: 100%;
          left: 0;
          top: 0;
          z-index: 1;
          @media (max-width: 1024px) {
            position: relative;
            width: auto;
            height: auto;
            left: auto;
            top: auto;
            padding-top: 34%;
          }
          &:before,
          &:after {
            display: block;
            position: absolute;
            content: '';
            left: 0;
            top: 0;
          }
          &:before {
            width: 60%;
            height: 100%;
            background-color: var(--c-secondary-200);
            clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
            opacity: 0.74;
            z-index: 3;
            @media (max-width: 1024px) {
              width: 30%;
            }
          }
          &:after {
            width: 100%;
            height: 100%;
            background-color: var(--c-secondary-100);
            clip-path: polygon(0 60%, 0 100%, 100% 100%);
            opacity: 0.74;
            z-index: 2;
            @media (max-width: 1024px) {
              height: 32px;
              left: 0;
              top: auto;
              bottom: 0;
              transform: translateY(50%);
              clip-path: none;
              background: url('../../img/pattern.png') left top repeat-x;
              z-index: 4;
            }
          }
          img {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            object-fit: cover;
            z-index: 1;
          }
        }
        .container {
          display: flex;
          flex-direction: column;
          justify-content: center;
          position: relative;
          height: 100%;
          padding-right: 700px;
          color: var(--c-white);
          z-index: 2;
          @media (max-width: 1440px) {
            padding-right: 600px;
          }
          @media (max-width: 1280px) {
            padding-right: 500px;
          }
          @media (max-width: 1024px) {
            height: auto;
            padding: 40px 0;
            color: var(--c-gray-500);
          }
          @media (max-width: 768px) {
            padding: 30px 0;
          }
          h4 {
            margin: 0;
            text-transform: none;
          }
          h2 {
            margin: 0;
            text-transform: none;
          }
          .text {
            margin-bottom: 20px;
            @media (max-width: 1440px) {
              margin-bottom: 14px;
            }
          }
        }
      }
    }
  }
  .main-slider-pagination-wrapper {
    position: absolute;
    left: 50%;
    bottom: 50px;
    transform: translateX(-50%);
    z-index: 2;
    @media (max-width: 1366px) {
      bottom: 40px;
    }
    @media (max-width: 1024px) {
      left: auto;
      right: 0;
      bottom: 60px;
      margin: 0;
    }
    @media (max-width: 768px) {
      bottom: 50px;
    }
    .main-slider-pagination {
      display: flex;
      gap: 14px;
      @media (max-width: 1024px) {
        gap: 10px;
      }
      .swiper-pagination-bullet {
        width: 16px;
        height: 16px;
        margin: 0;
        background-color: var(--c-white);
        transition: all 0.3s ease-in-out;
        opacity: 0.4;
        @media (max-width: 1024px) {
          width: 10px;
          height: 10px;
          background-color: var(--c-gray-300);
          opacity: 1;
        }
        &.swiper-pagination-bullet-active {
          background-color: var(--c-primary-200);
          opacity: 1;
        }
      }
    }
  }
}