body{font-family:Inter,Sarabun,sans-serif}

/* Fade */
.fade{opacity:0;transform:translateY(24px);transition:.8s}
.fade.show{opacity:1;transform:none}

/* Filter */
.filter-btn{
  border:1px solid #ccc;
  padding:.4rem .9rem;
  border-radius:999px;
  font-size:.85rem;
}
.filter-btn.active{background:#000;color:#fff}
.dark .filter-btn.active{background:#fff;color:#000}

/* Work */
.work-item.hidden{display:none}

/* Before After */
.ba-slider{
  position:relative;
  overflow:hidden;
  border-radius:1rem;
  touch-action:none;
}
.ba-slider img{width:100%;display:block}
.ba-slider .resize{
  position:absolute;top:0;left:0;width:50%;overflow:hidden
}
.ba-slider .handle{
  position:absolute;top:0;left:50%;
  width:3px;height:100%;background:#fff;cursor:ew-resize
}
.ba-slider .handle::after{
  content:'';position:absolute;top:50%;left:-12px;
  width:24px;height:24px;border-radius:50%;
  background:#fff;transform:translateY(-50%);
}
.dark .ba-slider .handle::after{background:#000}