.con-wrap {
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      overflow: hidden;
  }

  .img-comp-container {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
  }

  .img-comp-img {
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
  }

  .img-comp-container img {
      object-fit: cover;
      max-width: none !important;
  }

  .img-comp-img img {
      display: block;
  }

  .img-comp-slider {
      position: absolute;
      z-index: 9;
      cursor: ew-resize;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: transparent;
      border: none;
      box-shadow: 0 0 0 2px #ffffff;
  }

  /* ini testing */

  .img-comp-slider::before,
  .img-comp-slider::after {
      content: '';
      position: absolute;
      width: 1500px;
      height: 2px;
      background-color: white;
      left: 0;
      z-index: 1;
      transform: rotate(90deg)
  }

  .img-comp-slider::before {
      top: -752px;
      left: -730px
  }

  .img-comp-slider::after {
      bottom: -752px;
      left: -730px;
  }

  /* vertical */

  .img-comp-slider.vertical::before,
  .img-comp-slider.vertical::after {
      content: '';
      position: absolute;
      width: 1800px;
      height: 2px;
      background-color: white;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
  }

  .img-comp-slider.vertical::before {
      left: -1800px;
  }

  .img-comp-slider.vertical::after {
      left: 40px;
  }

  /* ini tessting */

  .img-comp-slider i {
      font-size: 14px;
      color: #ffffff;
      padding: 2px;
  }

  .img-comp-slider.vertical {
      position: absolute;
      z-index: 9;
      cursor: ns-resize;
      width: 40px;
      height: 40px;
      background-color: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      transform: translatex(-50%, -50%);
      box-shadow: 0 0 0 2px #ffffff;
  }

  .img-comp-slider.vertical i {
      font-size: 14px;
      color: #ffffff;
      padding: 2px;
  }

  /* caption css style */

  /* caption left */

  .caption-bottom-left {
      position: absolute;
      bottom: 8px;
      left: 16px;
  }

  .caption-top-left {
      position: absolute;
      top: 8px;
      left: 16px;
  }

  .caption-center-left {
      position: absolute;
      top: 50%;
      left: 16px;
      transform: translateY(-50%);
      /* Tambahan opsional untuk styling */
      text-align: right;
      white-space: nowrap;
  }

  /* caption left */

  /* caption right */

  .caption-top-right {
      position: absolute;
      top: 8px;
      right: 16px;
  }

  .caption-bottom-right {
      position: absolute;
      bottom: 8px;
      right: 16px;
  }

  .caption-center-right {
      position: absolute;
      top: 50%;
      right: 16px;
      transform: translateY(-50%);
      /* Tambahan opsional untuk styling */
      text-align: right;
      white-space: nowrap;
  }

  /* caption right */

  /* filter image */

  .filter-blur img {
      filter: blur(5px);
  }

  .filter-greyscale img {
      filter: grayscale(100%);
  }

  .filter-contrast img {
      filter: contrast(150%);
  }

  .filter-brightness img {
      filter: brightness(120%);
  }