.before-after-image-section {
  background: var(--before-after-section-gradient, var(--before-after-section-bg, rgb(var(--color-background))));
  color: var(--before-after-section-text, rgb(var(--color-text)));
}

.before-after-image__stack {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.before-after-image__stack--horizontal {
  flex-direction: row;
  align-items: flex-start;
}

.before-after-image__stack--center {
  align-items: center;
}

.before-after-image__stack--reverse {
  flex-direction: row-reverse;
}

.before-after-image__intro {
  width: 100%;
  max-width: var(--section-stack-intro, 33.3333%);
}

.before-after-image__main {
  width: 100%;
  max-width: var(--section-stack-main, 66.6667%);
}

.before-after-image__main--expand {
  max-width: 100%;
}

.before-after-image__prose > *:first-child {
  margin-top: 0;
}

.before-after-image__prose > *:last-child {
  margin-bottom: 0;
}

.before-after {
  --before-after-label-spacing: var(--spacing-5);
  -webkit-user-select: none;
  user-select: none;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.before-after__before-image,
.before-after__after-image {
  width: 100%;
  height: 100%;
}

.before-after__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.before-after__label {
  position: absolute;
}

.before-after__label--left:not(
  :lang(ae),
  :lang(ar),
  :lang(arc),
  :lang(bcc),
  :lang(bqi),
  :lang(ckb),
  :lang(dv),
  :lang(fa),
  :lang(glk),
  :lang(he),
  :lang(ku),
  :lang(mzn),
  :lang(nqo),
  :lang(pnb),
  :lang(ps),
  :lang(sd),
  :lang(ug),
  :lang(ur),
  :lang(yi)
) {
  left: 32px;
}

.before-after__label--left:is(
  :lang(ae),
  :lang(ar),
  :lang(arc),
  :lang(bcc),
  :lang(bqi),
  :lang(ckb),
  :lang(dv),
  :lang(fa),
  :lang(glk),
  :lang(he),
  :lang(ku),
  :lang(mzn),
  :lang(nqo),
  :lang(pnb),
  :lang(ps),
  :lang(sd),
  :lang(ug),
  :lang(ur),
  :lang(yi)
) {
  right: 32px;
}

.before-after__label--right:not(
  :lang(ae),
  :lang(ar),
  :lang(arc),
  :lang(bcc),
  :lang(bqi),
  :lang(ckb),
  :lang(dv),
  :lang(fa),
  :lang(glk),
  :lang(he),
  :lang(ku),
  :lang(mzn),
  :lang(nqo),
  :lang(pnb),
  :lang(ps),
  :lang(sd),
  :lang(ug),
  :lang(ur),
  :lang(yi)
) {
  right: 32px;
}

.before-after__label--right:is(
  :lang(ae),
  :lang(ar),
  :lang(arc),
  :lang(bcc),
  :lang(bqi),
  :lang(ckb),
  :lang(dv),
  :lang(fa),
  :lang(glk),
  :lang(he),
  :lang(ku),
  :lang(mzn),
  :lang(nqo),
  :lang(pnb),
  :lang(ps),
  :lang(sd),
  :lang(ug),
  :lang(ur),
  :lang(yi)
) {
  left: 32px;
}

.before-after__label--top {
  top: 16px;
}

.before-after__label--bottom {
  bottom: 16px;
}

.before-after__after-image {
  clip-path: inset(
    0 0 0
      calc(var(--before-after-initial-drag-position, 50%) + var(--clip-path-offset, 0px))
  );
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

[dir='rtl'] .before-after__after-image {
  clip-path: inset(
    0 calc(var(--before-after-initial-drag-position, 50%) - var(--clip-path-offset, 0px)) 0
      0
  );
}

.before-after__cursor-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.before-after__cursor {
  height: 100%;
  width: max-content;
  touch-action: none;
  transform: translate(calc(1 * -50% + var(--clip-path-offset, 0px)), -50%);
  cursor: grab;
  filter: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);
  will-change: transform;
  place-items: center;
  display: grid;
  position: relative;
}

.before-after__cursor::before {
  content: '';
  height: 100%;
  width: 2px;
  background: white;
  z-index: -1;
  position: absolute;
}

.before-after__cursor {
  top: 50%;
}

.before-after__cursor:not(
  :lang(ae),
  :lang(ar),
  :lang(arc),
  :lang(bcc),
  :lang(bqi),
  :lang(ckb),
  :lang(dv),
  :lang(fa),
  :lang(glk),
  :lang(he),
  :lang(ku),
  :lang(mzn),
  :lang(nqo),
  :lang(pnb),
  :lang(ps),
  :lang(sd),
  :lang(ug),
  :lang(ur),
  :lang(yi)
) {
  left: var(--before-after-initial-drag-position, 0px);
}

.before-after__cursor:is(
  :lang(ae),
  :lang(ar),
  :lang(arc),
  :lang(bcc),
  :lang(bqi),
  :lang(ckb),
  :lang(dv),
  :lang(fa),
  :lang(glk),
  :lang(he),
  :lang(ku),
  :lang(mzn),
  :lang(nqo),
  :lang(pnb),
  :lang(ps),
  :lang(sd),
  :lang(ug),
  :lang(ur),
  :lang(yi)
) {
  right: var(--before-after-initial-drag-position, 0px);
}

.before-after__cursor:active {
  cursor: grabbing;
}

@media screen and (min-width: 700px) {
  .before-after {
    --before-after-label-spacing: 32px;
  }

  .before-after__cursor svg {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 959px) {
  .before-after-image__stack--horizontal,
  .before-after-image__stack--reverse {
    flex-direction: column;
  }

  .before-after-image__intro,
  .before-after-image__main {
    max-width: 100%;
  }
}