@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /* Hide details marker */
  details > summary::-webkit-details-marker {
    display: none;
  }
  
  /* Compare Slider */
  .compare {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/10;
  }
  .compare img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .compare__after {
    clip-path: inset(0 0 0 var(--reveal-pos, 50%));
  }
  .compare__handle {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: ew-resize;
    z-index: 10;
    margin: 0;
  }
}