/* ================
// Before and After
// ============= */
.before-and-after {
  position: relative;
  overflow: hidden;
  width: 100%;
  cursor: ew-resize;
}
.before-and-after img {
  display: block;
  max-width: 100%;
}

.subject-before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  width: 100%;
}

.subject-scraper {
  overflow: hidden;
  transform: translate(50%, 0);
}
.subject-scraper:before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  height: 100%;
  width: 0.25em;
  content: "";
  background: #fff;
}

.subject-after {
  transform: translate(-50%, 0);
 /*filter: grayscale(100%);*/
}

/* ================
// Structure
// ============= */