@use "@/src/assets/scss/variables" as *;
@use "@/src/assets/scss/partial" as *;

.FullScreenSliderWrapper {
  .SwiperSliderWrap {
    .SwiperSlideItem {
      .SwiperSlideImg {
        transition: 0.3s all;
      }

      .SwiperSlideContent {
        transition: 0.3s all;

        h4,
        p {
          transition: 0.3s all;
        }
      }

      &:hover {
        .SwiperSlideImg {
          @media (min-width: $sm) {
            transform: translate(5px, -10px);
            rotate: -1.5deg;
          }

          @media (min-width: $md) {
            transform: translate(5px, -15px);
          }

          @media (min-width: $xxl) {
            transform: translate(0px, -15px);
          }
        }

        .SwiperSlideContent {
          background-color: $primaryColor;
          transform: translate(0px, 15px);

          @media (min-width: $sm) {
            rotate: 2deg;
            transform: translate(20px, 10px);
          }

          @media (min-width: $md) {
            transform: translate(18px, 50px);
          }

          @media (min-width: $xl) {
            transform: translate(25px, 70px);
          }

          @media (min-width: $xxl) {
            transform: translate(25px, 70px);
          }

          h4,
          p {
            color: $whiteColor;
          }

          .QuoteIcon {
            background-color: $whiteColor;
          }
        }
      }
    }
  }
}