.vf-compare {
  width: 100%;
  max-width: 1600px;
}
.vf-compare .vf-compare-nav {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  align-items: center;
  justify-content: flex-start;
  margin: -15px;
}
.vf-compare .vf-compare-nav .btn {
  padding: 2px 20px;
}
.vf-compare .vf-compare-nav .btn.active {
  background: #FFEB00;
  color: #363A3D;
}
.vf-compare .vf-compare-nav li {
  margin: 15px;
  /*
      a {
        &:hover {
          text-decoration: none;
          color: rgba(41, 121, 255, 1);
        }
      }
      */
}
.vf-compare .vf-compare-nav.-gallery {
  /*
        li {
            a {
                &.active {
                    color: rgba(41, 121, 255, 1);
                }
            }
        }
        */
}
.vf-compare .vf-compare-nav + .vf-compares {
  margin-top: 30px;
}
.vf-compare .vf-compares {
  width: 100%;
  max-width: 390px;
  overflow: hidden;
  position: relative;
}
.vf-compare .vf-compares .vf-compare-item {
  display: block;
  position: relative;
  overflow: hidden;
  /*
      height: 350px;
      @media (min-width: 768px) {
        height: 450px;
      }
      @media (min-width: 992px) {
        height: 550px;
      }
      @media (min-width: 1200px) {
        height: 650px;
      }
      */
  width: 100%;
  aspect-ratio: 1;
}
.vf-compare .vf-compares .vf-compare-item .vf-compare-left,
.vf-compare .vf-compares .vf-compare-item .vf-compare-right {
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  overflow: hidden;
}
.vf-compare .vf-compares .vf-compare-item .vf-compare-left img,
.vf-compare .vf-compares .vf-compare-item .vf-compare-right img {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: auto;
  transform: translate(0, -50%);
  z-index: 10;
}
.vf-compare .vf-compares .vf-compare-item .vf-compare-left .vf-compare-gradient,
.vf-compare .vf-compares .vf-compare-item .vf-compare-right .vf-compare-gradient {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  opacity: 1;
  transition: opacity 0.3s ease-out;
}
.vf-compare .vf-compares .vf-compare-item .vf-compare-left .vf-compare-text,
.vf-compare .vf-compares .vf-compare-item .vf-compare-right .vf-compare-text {
  display: none;
  /*
            position: absolute;
            opacity: 0;
            left: 0;
            top: 50%;
            width: 1600px;
            padding: 20px;
            transform: translate(0, -50%);
            color: #fff;
            transition: opacity .3s ease-out;
            z-index: 30;
            @media (min-width: 768px) {
                padding: 60px;
            }
            */
}
.vf-compare .vf-compares .vf-compare-item .vf-compare-left.active .vf-compare-text,
.vf-compare .vf-compares .vf-compare-item .vf-compare-right.active .vf-compare-text {
  opacity: 1;
}
.vf-compare .vf-compares .vf-compare-item .vf-compare-left.active .vf-compare-gradient,
.vf-compare .vf-compares .vf-compare-item .vf-compare-right.active .vf-compare-gradient {
  opacity: 0;
}
.vf-compare .vf-compares .vf-compare-item .vf-compare-left {
  width: 10%;
  z-index: 200;
}
.vf-compare .vf-compares .vf-compare-item .vf-compare-left .vf-compare-gradient {
  background: linear-gradient(to right, rgba(54, 58, 61, 0.4) 0%, rgba(54, 58, 61, 0.2) 50%);
}
.vf-compare .vf-compares .vf-compare-item .vf-compare-right {
  width: 100%;
  z-index: 100;
}
.vf-compare .vf-compares .vf-compare-item .vf-compare-right .vf-compare-text {
  text-align: right;
}
.vf-compare .vf-compares .vf-compare-item .vf-compare-right .vf-compare-gradient {
  background: linear-gradient(to right, rgba(54, 58, 61, 0.2) 0%, rgba(54, 58, 61, 0.4) 50%);
}
.vf-compare .vf-compares .vf-compare-item .vf-compare-trigger,
.vf-compare .vf-compares .vf-compare-item .vf-compare-left {
  transition: all 1s ease-out;
}
.vf-compare .vf-compares .vf-compare-item .vf-compare-trigger {
  z-index: 300;
  position: absolute;
  left: 10%;
  top: 0;
  height: 100%;
  transform: translate(-50%, 0);
}
.vf-compare .vf-compares .vf-compare-item .vf-compare-trigger .vf-compare-trigger-line {
  width: 2px;
  height: 100%;
  background: #363A3D;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
}
.vf-compare .vf-compares .vf-compare-item .vf-compare-trigger .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  padding: 0;
}
.vf-compare .vf-compares .vf-compare-item .vf-compare-trigger .btn .icon {
  margin: 0;
  position: absolute;
  top: 50%;
  display: block !Important;
}
.vf-compare .vf-compares .vf-compare-item .vf-compare-trigger .btn .icon.-left {
  left: 3px !important;
  transform: translate(0, -50%);
}
.vf-compare .vf-compares .vf-compare-item .vf-compare-trigger .btn .icon.-right {
  right: 3px !important;
  transform: translate(0, -50%);
}
.vf-compare .vf-compares .vf-compare-item.panning .vf-compare-trigger,
.vf-compare .vf-compares .vf-compare-item.panning .vf-compare-left {
  transition: none;
}
.vf-compare .vf-compares.-list .vf-compare-item + .vf-compare-item {
  margin-top: 80px;
}
.vf-compare .vf-compares.-gallery .vf-compare-item {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}
.vf-compare .vf-compares.-gallery .vf-compare-item.active {
  opacity: 1;
  pointer-events: auto;
}
.vf-compare .vf-compares.landscape {
  max-width: 870px;
}
.vf-compare .vf-compares.landscape .vf-compare-item {
  aspect-ratio: 16 / 9;
}