.slider-container {
      margin-bottom: 40px;
    }

    .before-after {
      position: relative;
      width: 100%;
      max-width: 800px;
      margin: auto;
      aspect-ratio: 4/3;
      overflow: hidden;
      border-radius: 10px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
      user-select: none;
    }

    .before-img,
    .after-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .after-img {
      clip-path: inset(0 50% 0 0);
      transition: clip-path 0.1s ease;
      z-index: 1;
    }

    .slider {
      position: absolute;
      top: 0;
      left: 50%;
      width: 4px;
      height: 100%;
      background: #ffffffcc;
      z-index: 2;
      pointer-events: none;
    }

    .handle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 24px;
      height: 24px;
      background: #fff;
      border: 2px solid #333;
      border-radius: 50%;
      z-index: 3;
      cursor: ew-resize;
    }

    .caption {
  position: absolute;
  color: white;
  font-size: clamp(0.8rem, 2vw, 1.2rem);
  font-weight: bold;
  padding: 0.4rem 0.8rem;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  z-index: 4;
  white-space: nowrap;
}

.before-caption {
  top: 1rem;
  left: 1rem;
}

.after-caption {
  top: 1rem;
  right: 1rem;
}