@import "settings";
@import "foundation";

.products-image-with-details {
  overflow: hidden;
  position: relative;
  padding-top: 144px;
  margin-top: -25px;
  .products-image-with-details-wrapper {
    .container-up {
      margin-bottom: 80px;
      .intro {
        color: #3c3c3b;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        text-transform: uppercase;
        margin: 8px;
      }
      .title {
        color: #3c3c3b;
        font-size: 34px;
        font-weight: 500;
        line-height: 120%;
        margin-bottom: 0;
        @include breakpoint(small only) {
          font-size: 26px;
        }
      }
      @include breakpoint(small only) {
        margin-bottom: 48px;
      }
    }
    .container-down {
      position: relative;
      z-index: 1;
      .box-wrapper {
        margin-bottom: 112px;
        gap: 80px;
        .text-wrapper {
          .box-inner {
            margin-bottom: 32px;
            .title {
              color: #3c3c3b;
              font-size: 30px;
              font-style: normal;
              font-weight: 700;
              line-height: 120%;
              margin-bottom: 24px;
              @include breakpoint(small only) {
                margin-bottom: 8px;
              }
            }
            .desc {
              color: #3c3c3b;
              font-size: 16px;
              font-style: normal;
              font-weight: 400;
              line-height: 150%;
              margin-bottom: 0;
            }
            &:last-child {
              margin-bottom: 0;
            }
          }
        }
        .image-wrapper {
          .img-carousel {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: fit-content;
            width: 100%;
            &.gb,
            &.ie {
              .slick-list {
                box-shadow: unset;
              }
            }
            .slick-list {
              width: 100%;
              // max-width: 515px;
              box-shadow: 0px 354.062px 99.066px 0px rgba(0, 0, 0, 0),
                0px 38.743px 90.483px 0px rgba(0, 0, 0, 0.01),
                0px 34.319px 76.535px 0px rgba(0, 0, 0, 0.05),
                0px 56.507px 56.507px 0px rgba(0, 0, 0, 0.09),
                0px 14.306px 31.115px 0px rgba(0, 0, 0, 0.1),
                0px 0px 0px 0px rgba(0, 0, 0, 0.1);
              border-radius: 0px 0px 5.722px 5.722px;
              .slick-track {
                width: 100%;
                padding-block: 0;
                .slick-slide {
                  width: 100%;
                  > div {
                    // margin-inline: 15px;
                    img {
                      object-fit: contain;
                      // max-width: 515px;
                      width: 100%;
                    }
                    @include breakpoint(small only) {
                      margin-inline: 5px;
                    }
                  }
                }
                .slick-slide[aria-hidden="true"] {
                  > div {
                    display: block;
                  }
                }
              }
            }
            .slick-dots {
              bottom: 0;
              margin-top: 18px;
              column-gap: 8px;
              width: fit-content;
              padding: 8px;
              border-radius: 28px;
              background: rgba(56, 93, 42, 0.1);
              backdrop-filter: blur(2px);
              li {
                height: 12px;
                width: 12px;
                &.slick-active {
                  button::before {
                    background: #185c9b;
                  }
                }
                button::before {
                  border: 1px solid #185c9b;
                }
              }
            }
            .slick-slide[aria-hidden="true"] > div {
              display: block !important;
            }
            transition: opacity 0.25s ease;
            opacity: 0;
            &.slick-initialized {
              opacity: 1;
            }
          }
        }
        @include breakpoint(medium down) {
          gap: 0;
        }
        @include breakpoint(small only) {
          margin-bottom: 64px;
          gap: 24px;
          &:nth-child(2n) {
            flex-direction: column-reverse;
          }
        }
      }
    }
    .img-up {
      position: absolute;
      transform: scale(2) rotate(90deg);
      top: -8%;
      right: 8%;
      z-index: -1;
      @include breakpoint(medium down) {
        right: -20%;
      }
      @include breakpoint(small only) {
        display: none;
      }
    }
    @include breakpoint(small only) {
      justify-content: center;
    }
  }
  .img-left {
    position: absolute;
    transform: scale(2);
    top: 57%;
    left: 80px;
    @include breakpoint(medium down) {
      display: none;
    }
  }
  @include breakpoint(medium down) {
    padding-top: 96px;
  }
}