/*********************************
	Section - multi columns
*/

.image-compare__sub-title{
  margin-bottom: 1.4rem;
  font-weight: 600;
}

.image-compare__sub-title,
.image-compare__description{max-width: 680px;}

.image-compare{position: relative;}
.image-compare__bg-color{content: ""; position: absolute; inset: 0 var(--page-space); display: block; z-index: -1; border-radius: 5px;background-image: var(--bg);box-shadow: 0px 3px 10px rgba(183, 178, 171, 0.29);}

.image-compare__intro-wrapper{
  position: relative;
  z-index: 2;
}

.image-compare__wrapper {
  --position-x: 50%;
  --compare-width: 5px;
  --dragger: 122px;
  margin-top: 60px;
  position: relative;
  z-index: 2;
  width: fit-content;
  margin-inline: auto;
  width: calc(100% - (var(--page-space) * 4));
  max-width: 1700px;
}

.image-compare__wrapper + *{
  margin-top: 40px;
  margin-inline: auto;
  width: calc(100% - (var(--page-space) * 4));
}

.image-compare__intro-wrapper{
  position: relative;
  z-index: 2;
}

.image-compare__wrapper.custom {
  --position-x: 50%;
  --compare-width: 5px;
  --dragger: 122px;
  margin-top: 60px;
  position: relative;
  z-index: 2;
  width: fit-content !important;
  margin-inline: auto;
  max-width: 1700px;
}

.image-compare__wrapper.custom + *{
  margin-top: 40px;
  margin-inline: auto;
  width: fit-content !important;
}

.image-compare__icon {
  position: absolute;
  bottom: calc(100% + 20px);
  left: 50%;
  transform: translateX(-50%);
}

.image-compare__front {
  display: block;
  vertical-align: top;
}
.image-compare__back {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--position-x);
  height: 100%;
  object-fit: cover;
  object-position: top left;
  // Demo purpose
  filter: grayscale(.8);
}

.image-compare__back:after {
  content: "";
  display: block;
  position: relative;
  top: 0;
  left: 100%;
  bottom: 0;
  width: 20px;
  height: 100%;
  background: #fff;
}

input[type="range"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.image-compare__position {
  --position-y: 50%;
  position: absolute;
  top: 0;
  left: var(--position-x);
  width: var(--compare-width);
  height: 100%;
  background: #fff;
  border-radius: 0;
  transform: translateX(calc((var(--compare-width) / 2) * -1));
}

.image-compare__position:after {
  content: "";
  display: block;
  box-shadow: 0 0 0 var(--compare-width) #fff inset;
  width: var(--dragger);
  height: var(--dragger);
  border-radius: 50%;
  position: absolute;
  top: calc(50% - (var(--dragger) / 2));
  left: calc(((var(--dragger) / 2) - (var(--compare-width) / 2)) * -1);
}

.image-compare__position svg {
  width: var(--dragger);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


@media (max-width: 1200px){
}

@media (max-width: 992px){
  .image-compare__wrapper {
    --position-x: 50%;
    --compare-width: 3px;
    --dragger: 60px;
  }
  .image-compare__position:after{
  }
  
  .image-compare__position svg {
    width: calc(var(--dragger) - 20px);
  }
}

@media (max-width: 768px){
  
  .image-compare__wrapper.custom {max-width: 85vw !Important;}
}

/*
set xxl = '1400px'
set xl = '1200px'
set lg = '992px'
set md = '768px'
set sm = '576px'
set xs = '480px'
*/